Extjs复选框添加和级联选中
在用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('系统提示', "添加失败"); } }); } }
我在做这个权限的时候也费了不少力气,发现网上都是大量重复的信息,如果有这方面需求或是经验的咱们可以交流哦!
第一次发帖,勿喷。