前言
扩展自$.fn.combo.defaults和$.fn.tree.defaults。使用$.fn.combotree.defaults重写默认值对象。下载该插件翻译源码
树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作
依赖关系
- combo
- tree
源码
/** * jQuery EasyUI 1.3.2 * *翻译： qq 1364386878 下拉树 */ (function ($) { //设置大小 function setSize(jq) { var options = $.data(jq, "combotree").options; var combotree = $.data(jq, "combotree").tree; $(jq).addClass("combotree-f"); $(jq).combo(options); var panel = $(jq).combo("panel"); if (!combotree) { combotree = $("<ul></ul>").appendTo(panel); $.data(jq, "combotree").tree = combotree; } combotree.tree($.extend({}, options, { checkbox: options.multiple, onLoadSuccess: function (node, data) { var values = $(jq).combotree("getValues"); if (options.multiple) { var checkedNodes = combotree.tree("getChecked"); for (var i = 0; i < checkedNodes.length; i++) { var id = checkedNodes[i].id; (function () { for (var i = 0; i < values.length; i++) { if (id == values[i]) { return; } } values.push(id); })(); } } $(jq).combotree("setValues", values); options.onLoadSuccess.call(this, node, data); }, onClick: function (node) { select(jq); $(jq).combo("hidePanel"); options.onClick.call(this, node); }, onCheck: function (node, node) { select(jq); options.onCheck.call(this, node, node); } })); }; //选择 function select(jq) { var options = $.data(jq, "combotree").options; var combotree = $.data(jq, "combotree").tree; var vv = [], ss = []; if (options.multiple) { var checkedNode = combotree.tree("getChecked"); for (var i = 0; i < checkedNode.length; i++) { vv.push(checkedNode[i].id); ss.push(checkedNode[i].text); } } else { var checkedNode = combotree.tree("getSelected"); if (checkedNode) { vv.push(checkedNode.id); ss.push(checkedNode.text); } } $(jq).combo("setValues", vv).combo("setText", ss.join(options.separator)); }; //设置数组值 function setValues(jq, values) { var options = $.data(jq, "combotree").options; var combotree = $.data(jq, "combotree").tree; combotree.find("span.tree-checkbox").addClass("tree-checkbox0").removeClass("tree-checkbox1 tree-checkbox2"); var vv = [], ss = []; for (var i = 0; i < values.length; i++) { var v = values[i]; var s = v; var node = combotree.tree("find", v); if (node) { s = node.text; combotree.tree("check", node.target); combotree.tree("select", node.target); } vv.push(v); ss.push(s); } $(jq).combo("setValues", vv).combo("setText", ss.join(options.separator)); }; //实例化下拉树 $.fn.combotree = function (target, parm) { if (typeof target == "string") { var method = $.fn.combotree.methods[target]; if (method) { return method(this, parm); } else { return this.combo(target, parm); } } target = target || {}; return this.each(function () { var combotree = $.data(this, "combotree"); if (combotree) { $.extend(combotree.options, target); } else { $.data(this, "combotree", { options: $.extend({}, $.fn.combotree.defaults, $.fn.combotree.parseOptions(this), target) }); } setSize(this); }); }; //默认方法 $.fn.combotree.methods = { //返回属性对象 options: function (jq) { var options = $.data(jq[0], "combotree").options; options.originalValue = jq.combo("options").originalValue; return options; }, //返回树形对象 tree: function (jq) { return $.data(jq[0], "combotree").tree; }, //读取本地树形数据 loadData: function (jq, data) { return jq.each(function () { var options = $.data(this, "combotree").options; options.data = data; var tree = $.data(this, "combotree").tree; tree.tree("loadData", data); }); }, //再次请求远程树数据。通过'url'参数重写原始URL值 reload: function (jq, url) { return jq.each(function () { var options = $.data(this, "combotree").options; var tree = $.data(this, "combotree").tree; if (url) { options.url = url; } tree.tree({ url: options.url }); }); }, //设置组件值数组 setValues: function (jq, values) { return jq.each(function () { setValues(this, values); }); }, //设置组件值。 setValue: function (jq, value) { return jq.each(function () { setValues(this, [value]); }); }, //清空控件的值 clear: function (jq) { return jq.each(function () { var tree = $.data(this, "combotree").tree; tree.find("div.tree-node-selected").removeClass("tree-node-selected"); var cc = tree.tree("getChecked"); for (var i = 0; i < cc.length; i++) { tree.tree("uncheck", cc[i].target); } $(this).combo("clear"); }); }, //重置 reset: function (jq) { return jq.each(function () { var options = $(this).combotree("options"); if (options.multiple) { $(this).combotree("setValues", options.originalValue); } else { $(this).combotree("setValue", options.originalValue); } }); } }; //解析器 $.fn.combotree.parseOptions = function (target) { return $.extend({}, $.fn.combo.parseOptions(target), $.fn.tree.parseOptions(target)); }; //默认属性、事件 继承comb和tree的 $.fn.combotree.defaults = $.extend({}, $.fn.combo.defaults, $.fn.tree.defaults, { //定义用户是否可以直接输入文本到字段中 editable: false }); })(jQuery);
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic ComboTree - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.validatebox.js"></script> <script src="../../plugins2/jquery.panel.js"></script> <script src="../../plugins2/jquery.combo.js"></script> <script src="../../plugins2/jquery.draggable.js"></script> <script src="../../plugins2/jquery.droppable.js"></script> <script src="../../plugins2/jquery.tree.js"></script> <script src="../../plugins2/jquery.combotree.js"></script> </head> <body> <h2>Basic ComboTree</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click the right arrow button to show the tree panel.</div> </div> <div style="margin:10px 0"></div> <input class="easyui-combotree" data-options="url:'../combotree/tree_data1.json',required:true" style="200px;"> </body> </html>
插件效果
