EXTjS4下拉樹 支援單選多選級聯選擇 comboxtree
阿新 • • 發佈：2019-01-05
初學EXTjS,程式碼參照了很多帖,忙活了一天,程式碼寫的比較簡單,容易看懂.
本下拉樹支援帶複選框和不帶複選框的JSON資料的,帶複選框的下拉樹也實現了單選功能,只需配置一下即可!
效果圖.
-
不帶checked的json資料格式只支援單選
-
帶jchecked的json資料的單選
-
帶checked的json資料的多選,可支援級聯操作,級聯分為級聯父節點,級聯子節點,兩者都級聯
封裝基類程式碼
:comboxtree.js
Ext.define("Ext.ux.comboboxtree", { extend: "Ext.form.field.Picker", requires: ["Ext.tree.Panel"], initComponent: function() { var self = this; Ext.apply(self, { fieldLabel: self.fieldLabel, labelWidth: self.labelWidth }); self.callParent(); }, createPicker: function() { var self = this; var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: self.storeUrl }, sorters: [{ property: 'leaf', direction: 'ASC' }, { property: 'text', direction: 'ASC' }], root: { id: self.rootId, text: self.rootText }, nodeParameter: self.treeNodeParameter }); self.picker = new Ext.tree.Panel({ height: 300, autoScroll: true, floating: true, focusOnToFront: false, shadow: true, ownerCt: this.ownerCt, useArrows: true, store: store, rootVisible: false }); self.picker.on({ checkchange: function(record, checked) { var checkModel = self.checkModel; if (checkModel == 'double') { var root = self.picker.getRootNode(); root.cascadeBy(function(node) { if (node.get('text') != record.get('text')) { node.set('checked', false); } }); if (record.get('leaf') && checked) { self.setRawValue(record.get('id')); // 隱藏值 self.setValue(record.get('text')); // 顯示值 } else { record.set('checked', false); self.setRawValue(''); // 隱藏值 self.setValue(''); // 顯示值 } } else { var cascade = self.cascade; if (checked == true) { if (cascade == 'both' || cascade == 'child' || cascade == 'parent') { if (cascade == 'child' || cascade == 'both') { if (!record.get("leaf") && checked) record.cascadeBy(function(record) { record.set('checked', true); }); } if (cascade == 'parent' || cascade == 'both') { pNode = record.parentNode; for (; pNode != null; pNode = pNode.parentNode) { pNode.set("checked", true); } } } } else if (checked == false) { if (cascade == 'both' || cascade == 'child' || cascade == 'parent') { if (cascade == 'child' || cascade == 'both') { if (!record.get("leaf") && !checked) record.cascadeBy(function(record) { record.set('checked', false); }); } } } var records = self.picker.getView().getChecked(), names = [], values = []; Ext.Array.each(records, function(rec) { names.push(rec.get('text')); values.push(rec.get('id')); }); self.setRawValue(values.join(';')); // 隱藏值 self.setValue(names.join(';')); // 顯示值 } }, itemclick: function(tree, record, item, index, e, options) { var checkModel = self.checkModel; if (checkModel == 'single') { if (record.get('leaf')) { self.setRawValue(record.get('id')); // 隱藏值 self.setValue(record.get('text')); // 顯示值 } else { self.setRawValue(''); // 隱藏值 self.setValue(''); // 顯示值 } } } }); return self.picker; }, alignPicker: function() { var me = this, picker, isAbove, aboveSfx = '-above'; if (this.isExpanded) { picker = me.getPicker(); if (me.matchFieldWidth) { picker.setWidth(me.bodyEl.getWidth()); } if (picker.isFloating()) { picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl isAbove = picker.el.getY() < me.inputEl.getY(); me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx); picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx); } } } });
呼叫方法
Ext.onReady(function() { var com = Ext.create("Ext.ux.comboboxtree", { id : 'name', name : 'name', hiddenName : 'hiddenName', storeUrl : 'data/tree2.json', cascade : 'child',//級聯方式:1.child子級聯;2.parent,父級聯,3,both全部級聯 checkModel:'single',//當json資料為不帶checked的資料時只配置為single,帶checked配置為double為單選,不配置為多選 width : 270, fieldLabel : '單位樹', labelWidth : 60, rootId : '1', rootText : 'DRP', treeNodeParameter : '', renderTo : Ext.getBody() }); });
兩種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
}]
}]
如果有幫助記得支援一下哦,可能也有不完善的地方歡迎改進!