eXtjs4下拉树支持单选复选级联选择 [复制链接]

最新推荐文章于 2020-10-13 15:39:13 发布

weixin_34202952

最新推荐文章于 2020-10-13 15:39:13 发布

阅读量121

点赞数

文章标签： json ux

原文链接：https://yq.aliyun.com/articles/550477

版权

效果图.

不带checked的json数据格式只支持单选

带jchecked的json数据的单选

带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

封装基类代码 :comboxtree.js
[html] view plain copy

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);
}
}
}
});

调用方法 [html] view plain copy

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格式的数据
一,不带复选框的数据
[html] view plaincopy

[{
"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

}]
}]

二.带复选框的数据

[html] view plaincopy

[{
"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
}]
}]