1、 增加 Node 的屬性，目的是將原來的名稱鏈接改成可選擇的 checkbox
|
function Node(id, pid, cname, cvalue, cshow, cchecked, cdisabled, url, title, target, icon, iconOpen, open) { this.id = id; this.pid = pid; //chechbox的名稱 this.cname = cname; //chechbox的值 this.cvalue = cvalue; //chechbox的顯示 this.cshow = cshow; //chechbox是否被選中，默認是不選 this.cchecked = cchecked||false; //chechbox是否可用，默認是可用 this.cdisabled = cdisabled||false; //節點鏈接，默認是虛鏈接 this.url = url||'#'; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p; }; |
2、 將原來節點顯示改爲 checkbox ，根節點不變，考慮了是否已選和是否可用的狀態
|
if(node.pid == this.root.id){ str += node.cname; }else{ /**組裝checkbox開始*/ checkboxSyntax = "<input type='checkbox' desc='" + node.cshow + "' name='" + node.cname + "' id='" + node.cname + "_" + node.id + "' value='" + node.cvalue + "' onClick='javascript: " + this.obj + ".checkNode(" + node.id+","+node.pid+","+node._hc + ",this.checked);' "; //是否被選中 if(node.cchecked) checkboxSyntax += " checked "; //是否可用 if(node.cdisabled) checkboxSyntax += " disabled "; checkboxSyntax += ">" + node.cshow; /**組裝checkbox結束*/
str += checkboxSyntax; } |
3、 增加一些選中的方法
功能是：
l 選中葉節點時遞歸選中父節點；
l 選中有子孫的節點時子孫節點遞歸選中；
l 去掉節點選擇時如果兄弟節點沒有選中的也去掉直接父節點的選中；
|
//=============================== // 作用：選中節點對象 // 參數： nobj node 對象 // cobj checkbox 對象 //=============================== dTree.prototype.checkNode = function(id,pid,_hc,checked) { //1 、遞歸選父節點對象（無論是葉節點還是中間節點） // 判斷同級中有無被選中的，如果有選中的就不可以反選 if(!this.isHaveBNode(id,pid)){ if(checked){ // 選中就一直選到根節點 this.checkPNodeRecursion(pid,checked); }else{ // 去掉選中僅將其父節點去掉選中 this.checkPNode(pid,checked); } }
//2 、如果是中間結點，具有兒子，遞歸選子節點對象 if(_hc) this.checkSNodeRecursion(id,checked);
}
//=============================== // 作用：判斷同級中有無被選中的 // 參數： id 節點 id // pid 節點的父節點 id //=============================== dTree.prototype.isHaveBNode = function(id,pid) { var isChecked = false for (var n=0; n<this.aNodes.length; n++) { // 不是節點自身、具有同父節點兄弟節點 if (this.aNodes[n].pid!=-1&&this.aNodes[n].id!=id&&this.aNodes[n].pid == pid) { if(eval("document.all."+ this.aNodes[n].cname + "_" + this.aNodes[n].id + ".checked")) isChecked = true; } }
return isChecked; };
//=============================== // 作用：遞歸選中父節點對象 // 參數： pid 節點的父節點 id // ischecked 是否被選中 //=============================== dTree.prototype.checkPNodeRecursion = function(pid,ischecked) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid!=-1&&this.aNodes[n].id == pid) { eval("document.all."+ this.aNodes[n].cname + "_" + this.aNodes[n].id + ".checked = " + ischecked); this.checkPNodeRecursion(this.aNodes[n].pid,ischecked); break; } } };
//=============================== // 作用：遞歸選中子節點對象 // 參數： id 節點 id // ischecked 是否被選中 //=============================== dTree.prototype.checkSNodeRecursion = function(id,ischecked) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid!=-1&&this.aNodes[n].pid == id) { eval("document.all."+ this.aNodes[n].cname + "_" + this.aNodes[n].id + ".checked = " + ischecked); this.checkSNodeRecursion(this.aNodes[n].id,ischecked); } } };
//=============================== // 作用：僅選中父節點對象 // 參數： pid 節點的父節點 id // ischecked 是否被選中 //=============================== dTree.prototype.checkPNode = function(pid,ischecked) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid!=-1&&this.aNodes[n].id == pid) { eval("document.all."+ this.aNodes[n].cname + "_" + this.aNodes[n].id + ".checked = " + ischecked); break; } } }; |
這棵樹用 js 編寫，調用方法很簡單，能夠很好的與 struts 結合使用，可用於權限管理的權限分配方面。節點的屬性對應用權限的屬性：
l Node(id, pid, cname, cvalue, ctext, cchecked, cdisabled)
l 權限（資源 id ，資源父 id ， checkbox 控件名用於最終取值，權限 id ，權限描述，是否已擁有該權限，是否可用）
源碼下載： AuthorityTree