|
|
/**
|
|
|
* License:MIT
|
|
|
* 下拉树插件
|
|
|
* selectTree
|
|
|
* author:lyt
|
|
|
*/
|
|
|
(function ($, window, document, undefined) {
|
|
|
var selectTreePlugin = 'selectTree',
|
|
|
defaults = {
|
|
|
expandAll: false,//是否全部展开，如果为tree，expandLevel不生效
|
|
|
expandLevel: 0,//展开层级
|
|
|
changeCallBack: null//change回调
|
|
|
};
|
|
|
var SelectTree = function (element, options) {
|
|
|
this.element = element;
|
|
|
this.original = $(element);//元select组件
|
|
|
this.options = $.extend({}, defaults, options);
|
|
|
this.data = [];//数据集合
|
|
|
this.treeData = [];//树结构数据集合
|
|
|
this.container = null;//构造容器
|
|
|
this.selectPanel = null;//选择面板
|
|
|
this.selectData = new Array();//选中数据集合
|
|
|
this.multiple = this.checkMultipleMode();//是否多选模式
|
|
|
this.placeholder = this.original.attr("placeholder") ? this.original.attr("placeholder") : '请选择';//默认提示内容
|
|
|
|
|
|
this.init();
|
|
|
this.initDom();
|
|
|
this.initPanelEvent();
|
|
|
this.expandDom();
|
|
|
}
|
|
|
SelectTree.prototype = {
|
|
|
//初始化树数据
|
|
|
init: function () {
|
|
|
var _this = this;
|
|
|
_this.data = _this.loadData();
|
|
|
_this.treeData = _this.loadTreeData(_this.data);
|
|
|
}, loadData: function () {
|
|
|
var _this = this;
|
|
|
var data = [];
|
|
|
var options = _this.original.find('option');
|
|
|
var selectValues = [];
|
|
|
if (_this.multiple) {//多选
|
|
|
selectValues = _this.original.val();
|
|
|
} else {
|
|
|
selectValues.push(this.original.val());
|
|
|
}
|
|
|
if (options && options.length > 0) {
|
|
|
var valueMap = new Map();
|
|
|
$.each(options, function () {
|
|
|
var option = $(this);
|
|
|
var text = option.text();
|
|
|
var value = option.val();
|
|
|
var pid = option.data("pid");
|
|
|
if(valueMap.has(value)) {
|
|
|
return true;
|
|
|
} else {
|
|
|
valueMap.set(value);
|
|
|
}
|
|
|
var optionData = {};
|
|
|
if (text && value) {
|
|
|
optionData.text = text;
|
|
|
optionData.value = value;
|
|
|
optionData.pid = pid;
|
|
|
optionData.isDisabled = false;
|
|
|
if (option.attr("disabled") == 'disabled') {
|
|
|
optionData.isDisabled = true;
|
|
|
}
|
|
|
if (selectValues && selectValues.length > 0) {
|
|
|
if ($.inArray(optionData.value, selectValues) >= 0) {
|
|
|
var selectObj = {
|
|
|
value: optionData.value,
|
|
|
text: optionData.text
|
|
|
}
|
|
|
_this.selectData.push(selectObj);
|
|
|
}
|
|
|
}
|
|
|
data.push(optionData);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
return data;
|
|
|
}, loadTreeData: function (data) {
|
|
|
var rootNode = [];
|
|
|
$.each(data, function () {
|
|
|
var pid = this.pid;
|
|
|
var hasChild = false;
|
|
|
$.each(data, function () {
|
|
|
if (pid == this.value) {
|
|
|
hasChild = true;
|
|
|
}
|
|
|
});
|
|
|
if (!hasChild) {
|
|
|
rootNode.push(this);
|
|
|
}
|
|
|
});
|
|
|
for (var i = 0; i < rootNode.length; i++) {
|
|
|
rootNode[i].level = 0;
|
|
|
rootNode[i].children = getTree(data, rootNode[i].value, 0);
|
|
|
}
|
|
|
return rootNode;
|
|
|
}, initDom: function () {
|
|
|
var _this = this;
|
|
|
var container = $('<div tabindex="0" class="select-tree-container"></div>');
|
|
|
_this.selectPanel = $('<div class="select-panel"></div>');
|
|
|
var selectValueBox = $('<div class="select-value"></div>');
|
|
|
_this.selectPanel.append(selectValueBox);
|
|
|
_this.setSelectedValue();
|
|
|
_this.setSelectPanelText();
|
|
|
|
|
|
container.append('<span class="select-tree-arrow"></span>');
|
|
|
container.append(_this.selectPanel);
|
|
|
container.append(_this.initTreeDom());
|
|
|
_this.original.after(container);
|
|
|
_this.original.hide();
|
|
|
_this.container = container;
|
|
|
},
|
|
|
initTreeDom: function () {//组装树结构
|
|
|
var treePanel = $('<div class="tree-panel"></div>');
|
|
|
var paddingValue = 10;
|
|
|
treePanel.append(this.assembleTreeDom(this.treeData, paddingValue));
|
|
|
treePanel.on('click', function (e) {
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
return treePanel;
|
|
|
},
|
|
|
initPanelEvent: function () {
|
|
|
var _this = this;
|
|
|
_this.selectPanel.on('click', function (e) {
|
|
|
|
|
|
//其他的容器处理
|
|
|
if (_this.container.hasClass('open')) {
|
|
|
_this.container.removeClass("open");
|
|
|
$(".select-tree-container").removeClass('open');
|
|
|
} else {
|
|
|
$(".select-tree-container").removeClass('open');
|
|
|
_this.container.addClass("open");
|
|
|
}
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
$(document).on('click', function () {
|
|
|
_this.container.removeClass("open");
|
|
|
});
|
|
|
}, assembleTreeDom: function (nodeArr, paddingValue) {
|
|
|
var _this = this;
|
|
|
var nextPaddingValue = paddingValue + 20;
|
|
|
|
|
|
var ulDom = '';
|
|
|
if (nodeArr && nodeArr.length > 0) {
|
|
|
ulDom = $('<ul class="tree-ul"></ul>');
|
|
|
for (var i = 0; i < nodeArr.length; i++) {
|
|
|
var liData = nodeArr[i];
|
|
|
var liDom = $('<li></li>');
|
|
|
var optionDom = $('<div class="tree-option" style="padding-left:' + paddingValue + 'px;" ></div>');
|
|
|
var arrowBox = $('<span class="tree-option-arrow"></span>');
|
|
|
var optionValue = $('<span class="tree-option-value" data-id="' + liData.value + '">' + liData.text + '</span>');
|
|
|
if (liData.isDisabled) {
|
|
|
optionDom.addClass("disabled");
|
|
|
}
|
|
|
optionDom.append(arrowBox);
|
|
|
optionDom.append(optionValue);
|
|
|
liDom.append(optionDom);
|
|
|
if (!liData.isDisabled) {
|
|
|
optionDom.on('click', function (e) {
|
|
|
var currentOptionText = $(this).find('.tree-option-value').text();
|
|
|
var currentOptionId = $(this).find('.tree-option-value').data('id');
|
|
|
var selectOptionObj = {};
|
|
|
selectOptionObj.value = currentOptionId + '';
|
|
|
selectOptionObj.text = currentOptionText;
|
|
|
|
|
|
if (_this.multiple) {
|
|
|
if ($(this).hasClass('selected')) {//取消选中操作
|
|
|
$(this).removeClass('selected');
|
|
|
var newSelectArray = new Array();
|
|
|
if (_this.selectData && _this.selectData.length > 0) {
|
|
|
$.each(_this.selectData, function (i, item) {
|
|
|
if (currentOptionId != item.value) {
|
|
|
newSelectArray.push(item);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
_this.selectData = newSelectArray;
|
|
|
|
|
|
} else {//选中操作
|
|
|
$(this).addClass('selected');
|
|
|
_this.selectData.push(selectOptionObj);
|
|
|
}
|
|
|
_this.setSelectedValue();
|
|
|
_this.setSelectPanelText();
|
|
|
|
|
|
} else {
|
|
|
_this.container.find('.tree-option').removeClass('selected');
|
|
|
$(this).addClass('selected');
|
|
|
_this.selectData = new Array();//单选模式，直接清空选中对象数组，添加新选择内容
|
|
|
_this.selectData.push(selectOptionObj);
|
|
|
_this.setSelectedValue();
|
|
|
_this.setSelectPanelText();
|
|
|
_this.container.removeClass('open');
|
|
|
}
|
|
|
if (_this.options.changeCallBack != null && typeof _this.options.changeCallBack == 'function') {
|
|
|
_this.options.changeCallBack(_this.selectData);
|
|
|
}
|
|
|
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
}
|
|
|
if (liData.children && liData.children.length > 0) {
|
|
|
arrowBox.append("<b></b>");
|
|
|
arrowBox.addClass('open');
|
|
|
arrowBox.on('click', function (e) {
|
|
|
$(this).toggleClass('open');
|
|
|
var childTree = $(this).closest('li').children('.tree-ul');
|
|
|
if ($(this).hasClass('open')) {
|
|
|
childTree.slideDown('fast');
|
|
|
} else {
|
|
|
childTree.slideUp('fast');
|
|
|
}
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
liDom.append(_this.assembleTreeDom(liData.children, nextPaddingValue));
|
|
|
}
|
|
|
ulDom.append(liDom);
|
|
|
if (!_this.options.expandAll) {//不是全部展开
|
|
|
var showLevel = _this.options.expandLevel;
|
|
|
var currentLevel = liData.level;
|
|
|
if (currentLevel > showLevel) {
|
|
|
arrowBox.removeClass('open');
|
|
|
ulDom.hide();
|
|
|
} else if (currentLevel == showLevel) {
|
|
|
arrowBox.removeClass('open');
|
|
|
}
|
|
|
}
|
|
|
if (_this.selectData && _this.selectData != null && _this.selectData.length > 0) {
|
|
|
|
|
|
$.each(_this.selectData, function (i, item) {
|
|
|
if (liData.value == item.value) {
|
|
|
optionDom.addClass('selected');
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
}
|
|
|
return ulDom;
|
|
|
}
|
|
|
|
|
|
}, expandDom: function () {
|
|
|
var _this = this;
|
|
|
var selectDom = _this.container.find(".tree-option.selected");
|
|
|
if (selectDom && selectDom.length > 0) {
|
|
|
var parentsDom = selectDom.parents('ul');
|
|
|
parentsDom.show();
|
|
|
parentsDom.siblings('.tree-option').find('.tree-option-arrow').addClass('open');
|
|
|
}
|
|
|
}, checkMultipleMode: function () {
|
|
|
if (this.original.attr("multiple") && this.original.attr("multiple") == 'multiple') {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}, setSelectPanelText() {
|
|
|
var _this = this;
|
|
|
var selectPanel = _this.selectPanel.find('.select-value');
|
|
|
selectPanel.empty();
|
|
|
if (_this.selectData && _this.selectData.length > 0) {
|
|
|
$.each(_this.selectData, function (index, item) {
|
|
|
var spanItem = $('<span class="select-item">' + item.text + '</span>');
|
|
|
var removeItem = $('<i>×</i>');
|
|
|
spanItem.append(removeItem);
|
|
|
selectPanel.append(spanItem);
|
|
|
removeItem.click(function (e) {
|
|
|
_this.unSelectedItem(item);
|
|
|
spanItem.remove();
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
selectPanel.html(_this.placeholder);
|
|
|
}
|
|
|
}, setSelectedValue() {
|
|
|
var _this = this;
|
|
|
_this.original.find('option').each(function () {
|
|
|
var _option = this;
|
|
|
$(_option).prop('selected', false);
|
|
|
$(_option).removeAttr('selected');
|
|
|
var optionValue = $(this).val();
|
|
|
if (_this.selectData && _this.selectData.length > 0) {
|
|
|
$.each(_this.selectData, function (i, item) {
|
|
|
if (optionValue == item.value) {
|
|
|
item.text = $(_option).text();
|
|
|
$(_option).prop('selected', true);
|
|
|
$(_option).attr('selected','selected');
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}, unSelectedItem(obj) {
|
|
|
var newSelectObj = [];
|
|
|
if (this.selectData && this.selectData.length > 0) {
|
|
|
$.each(this.selectData, function (i, item) {
|
|
|
if (obj.value != item.value) {
|
|
|
newSelectObj.push(item);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
this.selectData = newSelectObj;
|
|
|
this.setSelectedValue();
|
|
|
if (this.options.changeCallBack != null && typeof this.options.changeCallBack == 'function') {
|
|
|
this.options.changeCallBack(this.selectData);
|
|
|
}
|
|
|
this.selectData = [];
|
|
|
this.container.remove();
|
|
|
this.init();
|
|
|
this.initDom();
|
|
|
this.initPanelEvent();
|
|
|
this.expandDom();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
SelectTree.prototype.selectOption = function (values) {
|
|
|
var _this = this;
|
|
|
if (values.constructor == Array) {
|
|
|
_this.selectData = [];
|
|
|
$.each(values, function () {
|
|
|
var obj = {};
|
|
|
obj.value = this;
|
|
|
_this.selectData.push(obj);
|
|
|
})
|
|
|
} else {
|
|
|
_this.selectData = [{
|
|
|
value: values + ''
|
|
|
}]
|
|
|
}
|
|
|
this.setSelectedValue();
|
|
|
if (this.options.changeCallBack != null && typeof this.options.changeCallBack == 'function') {
|
|
|
this.options.changeCallBack(this.selectData);
|
|
|
}
|
|
|
this.selectData = [];
|
|
|
this.container.remove();
|
|
|
this.init();
|
|
|
this.initDom();
|
|
|
this.initPanelEvent();
|
|
|
this.expandDom();
|
|
|
}
|
|
|
SelectTree.prototype.clearSelect = function () {
|
|
|
this.selectData = new Array();
|
|
|
this.setSelectedValue();
|
|
|
if (this.options.changeCallBack != null && typeof this.options.changeCallBack == 'function') {
|
|
|
this.options.changeCallBack(this.selectData);
|
|
|
}
|
|
|
|
|
|
this.container.remove();
|
|
|
this.init();
|
|
|
this.initDom();
|
|
|
this.initPanelEvent();
|
|
|
this.expandDom();
|
|
|
}
|
|
|
SelectTree.prototype.expandAll = function () {
|
|
|
this.container.find(".tree-ul").show();
|
|
|
}
|
|
|
SelectTree.prototype.collapseAll = function () {
|
|
|
this.container.find(".tree-ul .tree-ul").hide();
|
|
|
}
|
|
|
SelectTree.prototype.getSelectInfo = function () {
|
|
|
return this.selectData;
|
|
|
}
|
|
|
|
|
|
function getTree(treeData, pid, level) {
|
|
|
level = level + 1;
|
|
|
var treeArr = [];
|
|
|
for (var i = 0; i < treeData.length; i++) {
|
|
|
var node = treeData[i];
|
|
|
if (node.pid == pid) {
|
|
|
node.level = level;
|
|
|
node.children = getTree(treeData, node.value, level);
|
|
|
treeArr.push(node);
|
|
|
}
|
|
|
}
|
|
|
return treeArr;
|
|
|
}
|
|
|
|
|
|
|
|
|
$.fn[selectTreePlugin] = function (options) {
|
|
|
var stArray = [];
|
|
|
this.each(function () {
|
|
|
if (!$.data(this, 'plugin_' + selectTreePlugin)) {
|
|
|
$.data(this, 'plugin_' + selectTreePlugin, new SelectTree(this, options));
|
|
|
stArray.push($(this).data()['plugin_' + selectTreePlugin]);
|
|
|
}
|
|
|
});
|
|
|
if (this.length === 1) {
|
|
|
return stArray[0];
|
|
|
} else {
|
|
|
return stArray;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
})(jQuery, window, document); |
