天津投入产出系统后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

280 lines
7.8 KiB

/*
* Fuel UX Tree
* https://github.com/ExactTarget/fuelux
*
* Copyright (c) 2012 ExactTarget
* Licensed under the MIT license.
*/
//ADDED some options and modifications
//define(['require','jquery'],function(require) {
(function($ , undefined) {//ACE
//var $ = require('jquery');
var old = $.fn.tree;
// TREE CONSTRUCTOR AND PROTOTYPE
var Tree = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.tree.defaults, options);
this.$element.on('click', '.tree-item', $.proxy( function(ev) { this.selectItem(ev.currentTarget); } ,this));
this.$element.on('click', '.tree-folder-header', $.proxy( function(ev) { this.selectFolder(ev.currentTarget); }, this));
this.render();
};
Tree.prototype = {
constructor: Tree,
render: function () {
this.populate(this.$element);
},
populate: function ($el) {
var self = this;
var $parent = $el.parent();
var loader = $parent.find('.tree-loader:eq(0)');
loader.show();
this.options.dataSource.data($el.data(), function (items) {
loader.hide();
$.each( items.data, function(index, value) {
var $entity;
if(value.type === "folder") {
$entity = self.$element.find('.tree-folder:eq(0)').clone().show();
$entity.find('.tree-folder-name').html(value.name);
$entity.find('.tree-loader').html(self.options.loadingHTML);
//$entity.find('.tree-folder-header').data(value);
//ACE
var header = $entity.find('.tree-folder-header');
header.data(value);
if('icon-class' in value)
header.find('i').addClass(value['icon-class']);
} else if (value.type === "item") {
$entity = self.$element.find('.tree-item:eq(0)').clone().show();
$entity.find('.tree-item-name').html(value.name);
$entity.data(value);
//ACE
if('additionalParameters' in value
&& 'item-selected' in value.additionalParameters
&& value.additionalParameters['item-selected'] == true) {
$entity.addClass ('tree-selected');
$entity.find('i').removeClass(self.options['unselected-icon']).addClass(self.options['selected-icon']);
//$entity.closest('.tree-folder-content').show();
}
}
// Decorate $entity with data making the element
// easily accessable with libraries like jQuery.
//
// Values are contained within the object returned
// for folders and items as dataAttributes:
//
// {
// name: "An Item",
// type: 'item',
// dataAttributes = {
// 'classes': 'required-item red-text',
// 'data-parent': parentId,
// 'guid': guid
// }
// };
var dataAttributes = value.dataAttributes || [];
$.each(dataAttributes, function(key, value) {
switch (key) {
case 'class':
case 'classes':
case 'className':
$entity.addClass(value);
break;
// id, style, data-*
default:
$entity.attr(key, value);
break;
}
});
if($el.hasClass('tree-folder-header')) {
$parent.find('.tree-folder-content:eq(0)').append($entity);
} else {
$el.append($entity);
}
});
// return newly populated folder
self.$element.trigger('loaded', $parent);
});
},
selectItem: function (el) {
if(this.options['selectable'] == false) return;//ACE
var $el = $(el);
var $all = this.$element.find('.tree-selected');
var data = [];
if (this.options.multiSelect) {
$.each($all, function(index, value) {
var $val = $(value);
if($val[0] !== $el[0]) {
data.push( $(value).data() );
}
});
} else if ($all[0] !== $el[0]) {
$all.removeClass('tree-selected')
//.find('i').removeClass('icon-ok').addClass('tree-dot');
.find('i').removeClass(this.options['selected-icon']).addClass(this.options['unselected-icon']);//ACE
data.push($el.data());
}
var eventType = 'selected';
if($el.hasClass('tree-selected')) {
eventType = 'unselected';
$el.removeClass('tree-selected');
//$el.find('i').removeClass('icon-ok').addClass('tree-dot');
$el.find('i').removeClass(this.options['selected-icon']).addClass(this.options['unselected-icon']);//ACE
} else {
$el.addClass ('tree-selected');
//$el.find('i').removeClass('tree-dot').addClass('icon-ok');
$el.find('i').removeClass(this.options['unselected-icon']).addClass(this.options['selected-icon']);//ACE
if (this.options.multiSelect) {
data.push( $el.data() );
}
}
if(data.length) {
this.$element.trigger('selected', {info: data});
}
// Return new list of selected items, the item
// clicked, and the type of event:
$el.trigger('updated', {
info: data,
item: $el,
eventType: eventType
});
},
selectFolder: function (el) {
var $el = $(el);
var $parent = $el.parent();
var $treeFolderContent = $parent.find('.tree-folder-content');
var $treeFolderContentFirstChild = $treeFolderContent.eq(0);
var target = '.' + $.trim(this.options['close-icon'].replace(/\s/g, '.'))//ACE
var eventType, classToTarget, classToAdd;
//if ($el.find('.icon-folder-close').length) {
if ($el.find(target).length) {//ACE
eventType = 'opened';
//classToTarget = '.icon-folder-close';
//classToAdd = 'icon-folder-open';
classToTarget = this.options['close-icon'];//ACE
classToAdd = this.options['open-icon'];//ACE
$treeFolderContentFirstChild.show();
if (!$treeFolderContent.children().length) {
this.populate($el);
}
} else {
target = '.' + $.trim(this.options['open-icon'].replace(/\s/g, '.'))//ACE
eventType = 'closed';
//classToTarget = '.icon-folder-open';
//classToAdd = 'icon-folder-close';
classToTarget = this.options['open-icon'];
classToAdd = this.options['close-icon'];
$treeFolderContentFirstChild.hide();
if (!this.options.cacheItems) {
$treeFolderContentFirstChild.empty();
}
}
//$parent.find(classToTarget).eq(0)
//.removeClass('icon-folder-close icon-folder-open')
//.addClass(classToAdd);
$parent.find(target).eq(0)
.removeClass(classToTarget)
.addClass(classToAdd);
this.$element.trigger(eventType, $el.data());
},
selectedItems: function () {
var $sel = this.$element.find('.tree-selected');
var data = [];
$.each($sel, function (index, value) {
data.push($(value).data());
});
return data;
},
// collapses open folders
collapse: function () {
var cacheItems = this.options.cacheItems;
// find open folders
//this.$element.find('.icon-folder-open').each(function () {
this.$element.find('.'+this.options['open-icon']).each(function () {
// update icon class
var $this = $(this)
//.removeClass('icon-folder-close icon-folder-open')
//.addClass('icon-folder-close');
.removeClass(this.options['open-icon'])
.addClass(this.options['close-icon']);
// "close" or empty folder contents
var $parent = $this.parent().parent();
var $folder = $parent.children('.tree-folder-content');
$folder.hide();
if (!cacheItems) {
$folder.empty();
}
});
}
};
// TREE PLUGIN DEFINITION
$.fn.tree = function (option) {
var args = Array.prototype.slice.call( arguments, 1 );
var methodReturn;
var $set = this.each(function () {
var $this = $( this );
var data = $this.data( 'tree' );
var options = typeof option === 'object' && option;
if( !data ) $this.data('tree', (data = new Tree( this, options ) ) );
if( typeof option === 'string' ) methodReturn = data[ option ].apply( data, args );
});
return ( methodReturn === undefined ) ? $set : methodReturn;
};
$.fn.tree.defaults = {
multiSelect: false,
loadingHTML: '<div>Loading...</div>',
cacheItems: true
};
$.fn.tree.Constructor = Tree;
$.fn.tree.noConflict = function () {
$.fn.tree = old;
return this;
};
//});
})(window.jQuery);//ACE