在用extjs做项目的时候,遇到了这样一个问题,做菜单权限,需要对菜单进行操作,就用了treepanel组件,如何添加复选框,如何级联选中,以及修改的时候如何通过数据库中菜单ID进行菜单的默认选中等问题。废话不说,进入正题。
1.复选框的添加
添加复选框可以在建model的时候加入一个字段 @checked,大家都明白为什么加@,就不解释了。通过json数据返回客户端的时候就会每个节点都有一个复选框,上图和代码:
var mytree = new Ext.tree.Panel({
id: 'treepanel',
height: 550,
singleExpand: false,
rootVisible: false,
useArrows: true,
checkModel: 'cascade', //对树的级联多选
selType: 'TreeModel',
store: treestoreadd,
listeners: {}
});
mytree.expandAll();
2.级联选中:
js
Code
mytree.on('checkchange', function (node, checked) { node.expand(); node.checked = checked; var parentNode = node.parentNode; if(parentNode !== null) { parentNode.set('checked',checked); };//选中父子节点就级联选中父节点 node.eachChild(function (child) { child.set('checked', checked); child.fireEvent('checkchange', child, checked); });//选中父节点就级联选中子节点 }, mytree);
3.修改
我做权限的解决方案是通过选中的菜单获取到Id,然后以字符串的格式把所有ID存入数据库,例如string t="1,2,3,4,5",那如果我要修改,从数据库取出这个字符串,以逗号分割,然后去给菜单的id比对,如果相等就把@checked设置成true,这样再以json格式返回,
在上一个往数据库存入的代码
var records=mytree.getChecked();
var pageIdStr;
var pageId = new Array();
if (records.length != 0) {
for (var i = 1; i < records.length; i++) {
pageId.push(records[i].internalId);
}
pageIdStr = pageId.join(',')
}
var f = authForm.getForm();
if (f.isValid()) {
f.submit({
url: '/Authority/Save?pageId=' + pageIdStr,
waitMsg: '数据处理中,请稍后...',
success: function (form, action) {
Ext.Msg.alert('系统提示', action.result.msg, function () {
f.reset();
});
store.load();
},
failure: function (form, action) {
Ext.Msg.alert('系统提示', "添加失败");
}
});
}
}
我在做这个权限的时候也费了不少力气,发现网上都是大量重复的信息,如果有这方面需求或是经验的咱们可以交流哦!
第一次发帖,勿喷。