最近寫了一棵權(quán)限樹,因為在寫之前到網(wǎng)上
google
了一下,好像沒有比較完整且簡單的做法,故將結(jié)果與各位共享一下。
我是將
dree
作了一些修改:
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;
??? //節(jié)點鏈接,默認是虛鏈接
??? 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、
?
將原來節(jié)點顯示改為
checkbox
,根節(jié)點不變,考慮了是否已選和是否可用的狀態(tài)
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結(jié)束*/
???????????????
??????? str += checkboxSyntax;
??? } |
3、
?
增加一些選中的方法
功能是:
l
????????
選中葉節(jié)點時遞歸選中父節(jié)點;
l
????????
選中有子孫的節(jié)點時子孫節(jié)點遞歸選中;
l
????????
去掉節(jié)點選擇時如果兄弟節(jié)點沒有選中的也去掉直接父節(jié)點的選中;
//===============================
//
作用:選中節(jié)點對象
//
參數(shù):
nobj node
對象
//????? cobj checkbox
對象
//===============================
dTree.prototype.checkNode = function(id,pid,_hc,checked) {
??? //1
、遞歸選父節(jié)點對象(無論是葉節(jié)點還是中間節(jié)點)
??? //
判斷同級中有無被選中的,如果有選中的就不可以反選
??? if(!this.isHaveBNode(id,pid)){
??????? if(checked){
??????????? //
選中就一直選到根節(jié)點
??????????? this.checkPNodeRecursion(pid,checked);
??????? }else{
??????????? //
去掉選中僅將其父節(jié)點去掉選中
??????????? this.checkPNode(pid,checked);
??????? }
??? }??
???
??? //2
、如果是中間結(jié)點,具有兒子,遞歸選子節(jié)點對象
?????
??? if(_hc)????
??????? this.checkSNodeRecursion(id,checked);
???
}
//===============================
//
作用:判斷同級中有無被選中的
//
參數(shù):
id
節(jié)點
id
//????? pid
節(jié)點的父節(jié)點
id
//===============================
dTree.prototype.isHaveBNode = function(id,pid) {???
??? var isChecked = false
??? for (var n=0; n<this.aNodes.length; n++) {
??????? //
不是節(jié)點自身、具有同父節(jié)點兄弟節(jié)點
??????? 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;
};
//===============================
//
作用:遞歸選中父節(jié)點對象
//
參數(shù):
pid
節(jié)點的父節(jié)點
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;
??????? }
??? }
};
//===============================
//
作用:遞歸選中子節(jié)點對象
//
參數(shù):
id
節(jié)點
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);?????????
??????? }
??? }
};
//===============================
//
作用:僅選中父節(jié)點對象
//
參數(shù):
pid
節(jié)點的父節(jié)點
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
編寫,調(diào)用方法很簡單,能夠很好的與
struts
結(jié)合使用,可用于權(quán)限管理的權(quán)限分配方面。節(jié)點的屬性對應(yīng)用權(quán)限的屬性:
l
????????
Node(id, pid, cname, cvalue, ctext, cchecked, cdisabled)
l
????????
權(quán)限(資源
id
,資源父
id
,
checkbox
控件名用于最終取值,權(quán)限
id
,權(quán)限描述,是否已擁有該權(quán)限,是否可用)
源碼下載:
AuthorityTree
?