2023年6月22日发(作者：)

EXTjS4下拉树⽀持单选多选级联选择comboxtree

初学EXTjS,代码参照了很多帖,忙活了⼀天,代码写的⽐较简单,容易看懂. 本下拉树⽀持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置⼀下即可!效果图.不带checked的json数据格式只⽀持单选带jchecked的json数据的单选带checked的json数据的多选,可⽀持级联操作,级联分为级联⽗节点,级联⼦节点,两者都级联封装基类代码:("oxtree", { extend: "", requires: [""], initComponent: function() { var self = this; (self, { fieldLabel: abel, labelWidth: idth }); rent(); }, createPicker: function() { var self = this; var store = ('ore', { proxy: { type: 'ajax', url: rl }, sorters: [{ property: 'leaf', direction: 'ASC' }, { property: 'text', direction: 'ASC' }], root: { id: , text: xt }, nodeParameter: deParameter }); = new ({ height: 300, autoScroll: true, floating: true, focusOnToFront: false, shadow: true, ownerCt: t, useArrows: true, store: store, rootVisible: false }); }); ({ checkchange: function(record, checked) { var checkModel = odel; if (checkModel == 'double') { var root = tNode(); eBy(function(node) { if (('text') != ('text')) { ('checked', false); } }); if (('leaf') && checked) { Value(('id')); // 隐藏值 ue(('text')); // 显⽰值 } else { ('checked', false); Value(''); // 隐藏值 ue(''); // 显⽰值 } } else { var cascade = e; if (checked == true) { if (cascade == 'both' || cascade == 'child' || cascade == 'parent') { if (cascade == 'child' || cascade == 'both') { if (!("leaf") && checked) eBy(function(record) { ('checked', true); }); } if (cascade == 'parent' || cascade == 'both') { pNode = Node; for (; pNode != null; pNode = Node) { ("checked", true); } } } } else if (checked == false) { if (cascade == 'both' || cascade == 'child' || cascade == 'parent') { if (cascade == 'child' || cascade == 'both') { if (!("leaf") && !checked) eBy(function(record) { ('checked', false); }); } } } var records = w().getChecked(), names = [], values = []; (records, function(rec) { (('text')); (('id')); }); Value((';')); // 隐藏值 ue((';')); // 显⽰值 } } }, itemclick: function(tree, record, item, index, e, options) { var checkModel = odel; if (checkModel == 'single') { if (('leaf')) { Value(('id')); // 隐藏值 ue(('text')); // 显⽰值 } else { Value(''); // 隐藏值 ue(''); // 显⽰值 } } } }); return ; }, alignPicker: function() { var me = this, picker, isAbove, aboveSfx = '-above'; if (nded) { picker = ker(); if (ieldWidth) { th(th()); } if (ting()) { o(l, "", Offset); // ""->tl isAbove = () < (); [isAbove ? 'addCls': 'removeCls'](s + aboveSfx); [isAbove ? 'addCls': 'removeCls'](s + aboveSfx); } } }});调⽤⽅法 y(function() { var com = ("oxtree", { id : 'name', name : 'name', hiddenName : 'hiddenName', storeUrl : 'data/', cascade : 'child',//级联⽅式:⼦级联;,⽗级联,3,both全部级联 checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选 width : 270, fieldLabel : '单位树', labelWidth : 60, rootId : '1', rootText : 'DRP', treeNodeParameter : '', renderTo : y() }); });两种json格式的数据⼀,不带复选框的数据[{ "text": "To Do",

"cls": "folder", "expanded": true, "children": [{ "text": "Go jogging", "leaf": true },{ "text": "Take a nap", "leaf": true

},{ "text": "Climb Everest", "leaf": true

}]},{ "text": "Grocery List", "cls": "folder", "children": [{ "text": "Bananas", "leaf": true

},{ "text": "Milk", "leaf": true

},{ "text": "Cereal", "leaf": true

},{ "text": "Energy foods", "cls": "folder", "children": [{ "text": "Coffee", "leaf": true

},{ "text": "Red Bull", "leaf": true

}] }]},{ "text": "Remodel Project",

"cls": "folder", "children": [{ "text": "Finish the budget", "leaf": true

},{ "text": "Call contractors", "leaf": true

},{ "text": "Choose design", "leaf": true

}]}] ⼆.带复选框的数据 [{ "text": "To Do",

"cls": "folder", "expanded": true, "children": [{ "text": "Go jogging", "leaf": true, "checked": true },{ "text": "Take a nap", "leaf": true, "checked": false },{ "text": "Climb Everest", "leaf": true, "checked": false }]},{ "text": "Grocery List", "cls": "folder", "children": [{ "text": "Bananas", "leaf": true, "checked": false },{ "text": "Milk", "leaf": true, "checked": false },{ "text": "Cereal", "leaf": true, "checked": false },{ "text": "Energy foods", "cls": "folder", "children": [{ "text": "Coffee", "leaf": true, "checked": false },{ "text": "Red Bull", "leaf": true, "checked": false }] }]},{ "text": "Remodel Project",

"cls": "folder", "children": [{ "text": "Finish the budget", "leaf": true, "checked": false },{ "text": "Call contractors", "leaf": true, "checked": false },{ "text": "Choose design", "leaf": true, "checked": false }]}] 如果有帮助记得⽀持⼀下哦,可能也有不完善的地⽅欢迎改进!