ExtJS带复选框的动态树

ExtJS的树用过好多次了，但是今天是第一次用加复选框的，要实现的效果是这样的：点击页面上的“自选”按钮，弹出一个窗口，窗口上有一棵树和一个Grid，选择树节点时向Grid里添加数据，取消选择树节点时将Grid里面对应的记录删掉，而且选择或取消选择父节点时可以将其子节点的数据从Grid中添加或删除。

 

去除其他无关代码，主要代码如下：

 

前台JS:

 var app={}; var combiStoreTemp=new Ext.data.ArrayStore({ fields:['CombiId','CombiName','CombiType','AboutGender','Note'], id:'CombiId', autoDestroy:true }); Ext.onReady(function(){ Ext.QuickTips.init(); var tree= new Ext.tree.TreePanel({ lines:true,//虚线 bodyStyle:"background:#FFFFFF", rootVisible:true,//根节点是否可见 useArrows:true,//小箭头 autoHeight:false, split:true, height:440, width:233, autoScroll:true, animate:false,//动画效果 enableDD:false,//允许拖拽 border:false, containerScroll: true, root:new Ext.tree.AsyncTreeNode({text:'组合列表',id:'treeroot',GroupId:'',checked:false}), loader:new Ext.tree.TreeLoader({ dataUrl:'ComTree.ashx', listeners:{ 'beforeload':function(treeLoader, node) { this.baseParams.GroupId=node.attributes["GroupId"];//加载节点时传递的参数 } } }), listeners:{ 'checkchange':function(node,e){ //遍历树，一直到叶子节点，因为我这棵树深度为3，所以遍历两级子节点即可 if(node.attributes["checked"]==true){//选中则新增 if(node.attributes["leaf"]!=true){ var childnodes = node.childNodes; for(var i=0;i<childnodes.length;i++){ childnodes[i].getUI().checkbox.checked=true; //勾选子节点的复选框 if(childnodes[i].attributes["leaf"]!=true){ var mchildnodes=childnodes[i].childNodes; for(var j=0;j<mchildnodes.length;j++){ mchildnodes[j].getUI().checkbox.checked=true; EditNode(mchildnodes[j],'add'); } }else{ EditNode(childnodes[i],'add'); } } }else{ EditNode(node,'add'); } }else{ //取消选中则删除 if(node.attributes["leaf"]!=true){ var childnodes = node.childNodes; for(var i=0;i<childnodes.length;i++){ childnodes[i].getUI().checkbox.checked=false; if(childnodes[i].attributes["leaf"]!=true){ var mchildnodes=childnodes[i].childNodes; for(var j=0;j<mchildnodes.length;j++){ mchildnodes[j].getUI().checkbox.checked=false; //取消选中子节点的复选框 EditNode(mchildnodes[j],'del'); } }else{ EditNode(childnodes[i],'del'); } } }else{ EditNode(node,'del'); } } } } }); app.ComWin=new Ext.Window({ closeAction : 'hide', title:'自选组合', width:'600', layout:'column', defaults:{layout:'form'}, items:[{ columnWidth:.4, items:[tree] },{ columnWidth:.6, buttonAlign:'center', items:[CombiGridTemp], buttons:[{text:'我选好了',handler:function(){ var rowCount = combiStoreTemp.getCount(); for(var i=0;i<rowCount;i++) combiStore.add(combiStoreTemp.getAt(i)); app.ComWin.hide(); }},{text:'关闭',handler:function(){app.ComWin.hide();}}] }] }); app.ItemForm = new Ext.form.FormPanel({ layout:"form", frame:true, modal:false, shadow:false, autoScroll:true, labelSeparator:'：', labelWidth:65, labelAlign:'right', items:[{ xtype:'button', text:'自选', handler:function(){ app.ComWin.show(); if(!tree.getRootNode().isExpanded())tree.getRootNode().expand();//展开树的根节点 } }] }); }); function EditNode(node,type){ var total= combiStoreTemp.getCount(); var flag=false,num=0; //对于用add方法加入的记录，indexOfId方法无法找到（why?），所以循环store以查找是否已存在选择的记录 for(var i=0;i<total;i++){ if(combiStoreTemp.getAt(i).data['CombiId']==node.attributes["id"]) { flag=true; num=i; break; } } if(type=="add"){ if(flag==false){ var obj=new Object(); obj["CombiId"]= node.attributes["id"]; obj["CombiName"]=node.attributes["text"]; obj["CombiType"]= node.parentNode.attributes["text"]; obj["AboutGender"]= node.attributes["CombSex"]; obj["Note"]= node.attributes["CombExplain"]; var rec=new Ext.data.Record(obj); combiStoreTemp.add(rec); } }else{ //alert(combiStoreTemp.indexOfId(node.attributes["id"])+"|"+node.attributes["id"]+"|"+combiStoreTemp.getAt(1).get(id)); if(flag==true) combiStoreTemp.remove(combiStoreTemp.getAt(num)); } }

取树节点的文件ComTree.ashx中的相关代码：

public class ComTree : IHttpHandler { SYSDataClassesDataContext sysds = new SYSDataClassesDataContext(); private string _GroupId = "";//所属类别ID public void ProcessRequest (HttpContext context) { _GroupId = context.Request.Form["GroupId"] if (string.IsNullOrEmpty(_GroupId)) context.Response.Write(GetFirstNodes()); else context.Response.Write(GetSecondNodes()); } public bool IsReusable { get { return false; } } protected string GetFirstNodes() { IQueryable<CHECK_OfficList> node = sysds.CHECK_OfficList; string temp = string.Empty; temp += "["; if (Convert.ToInt32(node.Count()) > 0) { foreach (var rst in node) { temp += "{text:'" + rst.OfficeName.Trim() + "',id:'" + rst.OID + "P" + "',GroupId:'" + rst.OID + "',leaf:false,checked:false},"; } } if ((!string.IsNullOrEmpty(temp)) && temp.Length > 1) temp = temp.Substring(0, temp.Length - 1); temp += "]"; return temp; } protected string GetSecondNodes() { string temp = string.Empty; temp += "["; IQueryable<CHECK_CheckUPComb> node; node = sysds.CHECK_CheckUPComb.Where(x => x.OID == Convert.ToInt32(_GroupId)); if(Convert.ToInt32(node.Count()) > 0) { foreach (var rst in node) { temp += "{text:'" + rst.CombName.Trim() + "',id:'" + rst.CombID + "',GroupId:'" + _GroupId + "',CombSex:'" + rst.CombSex + "',CombExplain:'" + rst.CombExplain + "',leaf:true,checked:false},"; } } if ((!string.IsNullOrEmpty(temp)) && temp.Length > 1) temp = temp.Substring(0, temp.Length - 1); temp += "]"; return temp; } }

 

ComTree.ashx文件中返回数据的格式（即节点数据的格式）是：[{text:'',id:''},{text:'',id:''}]，text和id是必须的，分别是节点的id和显示文字，还有一个icon，是节点前的小图标的URL,如果返回了icon,就会把默认的小图标换成返回路径的图标。

 

 

当勾选或取消了一个节点时，我是采用遍历的方法来操作数据的，那么问题来了，如果所选的是一个叶子节点，直接操作该条数据即可，但是如果选择的是一个非页节点的节点，并且该节点有很多子节点，一个一个遍历来操作子节点对应的数据这种法则速度会很慢，不知道有没有人知道更好的方法。