extjs tree实例,extjs带复选框的树
定义store
var store = Ext.create('Ext.data.TreeStore', { scope: this, proxy: { type: 'ajax', url: "test/menu/listV2", timeout: 900000, reader: { type: 'json', root: 'res'//数据 }, //传参 extraParams: { 'roleId': roleId } }, root: { text: 'root', id: '-1', expanded: true }, listeners: { scope: this, beforeload: function (store) { store.getProxy().extraParams.roleId = source.com_roleId.getValue(); } } });
调用url接口获取后台数据
在listeners里面增加传递到后台的参数,url接口返回数据,
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
useArrows: true,
frame: true,
title: 'CheckTree',
width: 500,
height: 700,
dockedItems: [{
xtype: 'toolbar',
scope: this,
items: {
text: '设定权限',
handler: function () {
var records = tree.getView().getChecked(),
menuIds = [];
authIds = [];
Ext.Array.each(records, function (rec) {
if(rec.get('type') == '2')
menuIds.push(rec.get('id'));
else if(rec.get('type') == '3')
authIds.push(rec.get('id'));
});
var authVo = {"menuCode":menuIds,"authId":authIds};
Ext.Ajax.request({
url: 'wms/menu/setting?roleId='+source.com_roleId.getValue(),
headers: {'Content-Type': "application/json; charset=utf-8"},
method: 'POST',
params: Ext.util.JSON.encode(authVo),
scope: this,
success: function (response, options) {
var result = Ext.util.JSON.decode(response.responseText);
if (result.success) {
Ext.success(result.msg)
} else {
Ext.error(result.msg);
}
},
failure: function (response, options) {
var result = Ext.util.JSON.decode(response.responseText);
Ext.error(result.msg);
}
});
}
}
}]
});
定义tree
tree.on('checkchange',function (node,flag){
console.log("change!!!");
if(flag){
var pNode = node.parentNode;
pNode.set("checked",flag);
if(!node.isLeaf() && !node.isExpanded()){
node.set("expanded","true")
}
var cnode = node.childNodes;
for(var res in cnode){
cnode[res].set("checked",flag);
}
}else{
var cnode = node.childNodes;
for(var res in cnode){
cnode[res].set("checked",flag);
}
}
});
tree事件处理,选中一个节点,默认全中他的全部子节点,并选中他的父节点。
后台数据结构
private String id; private String text; private String cls; private boolean expanded;//是否展开 private Boolean leaf;//是否叶子 private boolean checked;//是否checkbox选中 private String type; private List<MenuTree> res;//子节点
为什么这里用res,不用children,参考上一篇
1 对 “extjs tree实例,extjs带复选框的树”的想法;