最近寫了一棵權(quán)限樹,因?yàn)樵趯懼暗骄W(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是否被選中,默認(rèn)是不選

          ??? this.cchecked = cchecked||false;

          ??? //chechbox是否可用,默認(rèn)是可用

          ??? this.cdisabled = cdisabled||false;

          ??? //節(jié)點(diǎn)鏈接,默認(rèn)是虛鏈接

          ??? 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é)點(diǎn)顯示改為 checkbox ,根節(jié)點(diǎn)不變,考慮了是否已選和是否可用的狀態(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é)點(diǎn)時遞歸選中父節(jié)點(diǎn);

          l ???????? 選中有子孫的節(jié)點(diǎn)時子孫節(jié)點(diǎn)遞歸選中;

          l ???????? 去掉節(jié)點(diǎn)選擇時如果兄弟節(jié)點(diǎn)沒有選中的也去掉直接父節(jié)點(diǎn)的選中;

          //===============================

          // 作用:選中節(jié)點(diǎn)對象

          // 參數(shù): nobj node 對象

          //????? cobj checkbox 對象

          //===============================

          dTree.prototype.checkNode = function(id,pid,_hc,checked) {

          ??? //1 、遞歸選父節(jié)點(diǎn)對象(無論是葉節(jié)點(diǎn)還是中間節(jié)點(diǎn))

          ??? // 判斷同級中有無被選中的,如果有選中的就不可以反選

          ??? if(!this.isHaveBNode(id,pid)){

          ??????? if(checked){

          ??????????? // 選中就一直選到根節(jié)點(diǎn)

          ??????????? this.checkPNodeRecursion(pid,checked);

          ??????? }else{

          ??????????? // 去掉選中僅將其父節(jié)點(diǎn)去掉選中

          ??????????? this.checkPNode(pid,checked);

          ??????? }

          ??? }??

          ???

          ??? //2 、如果是中間結(jié)點(diǎn),具有兒子,遞歸選子節(jié)點(diǎn)對象 ?????

          ??? if(_hc)????

          ??????? this.checkSNodeRecursion(id,checked);

          ???

          }

          ?

          //===============================

          // 作用:判斷同級中有無被選中的

          // 參數(shù): id 節(jié)點(diǎn) id

          //????? pid 節(jié)點(diǎn)的父節(jié)點(diǎn) id

          //===============================

          dTree.prototype.isHaveBNode = function(id,pid) {???

          ??? var isChecked = false

          ??? for (var n=0; n<this.aNodes.length; n++) {

          ??????? // 不是節(jié)點(diǎn)自身、具有同父節(jié)點(diǎn)兄弟節(jié)點(diǎ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;

          };

          ?

          //===============================

          // 作用:遞歸選中父節(jié)點(diǎn)對象

          // 參數(shù): pid 節(jié)點(diǎn)的父節(jié)點(diǎn) 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é)點(diǎn)對象

          // 參數(shù): id 節(jié)點(diǎn) 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é)點(diǎn)對象

          // 參數(shù): pid 節(jié)點(diǎn)的父節(jié)點(diǎn) 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é)點(diǎn)的屬性對應(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

          ?

          ?

          posted on 2006-05-14 09:11 野草 閱讀(5842) 評論(17)  編輯  收藏 所屬分類: html/js

          評論:
          # re: 簡單靈活的權(quán)限樹 2006-08-03 14:20 | 李fei
          你好,你的這個權(quán)限樹的源碼下載后怎么是亂碼呢?  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2006-11-07 20:47 | empty
          謝謝你的源碼不錯.簡單靈活的權(quán)限樹! ksks   回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2006-12-07 09:09 | wangmi
          真的不錯。我正需要呢。  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2006-12-28 14:03 | sasfy
          大忙  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2007-01-20 18:54 | 地平線
          為什么你的DTREE在JSP頁面上顯示不出來,腳本報錯說dTree未定義呀?
          在普通的html里面顯示正常?  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2007-06-08 10:38 | ran
          為什么在我的jsp頁面中有未定義的事件出現(xiàn)啊??

          怎樣才能改正啊??  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2007-12-24 17:11 | Aly
          呵呵 不錯!頂一下  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2008-03-28 16:04 | 于翔
          不錯,謝謝!  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹[未登錄] 2008-05-17 13:38 | yy
          對checkbox再加上樣式就完美了
          style="VERTICAL-ALIGN:middle;WIDTH:11px;HEIGHT: 11px"  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2008-06-18 15:45 |
          為什么當(dāng)子結(jié)點(diǎn)沒有一個選中時,父結(jié)點(diǎn)卻是選中的??  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2008-07-22 08:04 | qun715715
          謝謝提供,正需要這個樹!  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2009-06-18 21:28 | leizhihui
          @李fei
            回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2010-03-17 10:28 | jj
          很不錯,學(xué)習(xí)了~  回復(fù)  更多評論
            
          # : 簡單靈活的權(quán)限樹 2010-09-09 11:55 | sfd
          有bug@jj
          @jj
            回復(fù)  更多評論
            
          # : 簡單靈活的權(quán)限樹 2010-09-09 11:55 | sfd
          # re: 簡單靈活的權(quán)限樹 2011-11-27 19:25 | 龔杰
          請問怎樣和struts相結(jié)合啊  回復(fù)  更多評論
            
          # re: 簡單靈活的權(quán)限樹 2014-08-29 16:49 | DSD酸
          和struct結(jié)合一下唄  回復(fù)  更多評論
            
          主站蜘蛛池模板: 隆昌县| 肥城市| 南昌县| 蕉岭县| 重庆市| 宿州市| 蒙山县| 简阳市| 乌兰县| 永宁县| 龙门县| 方城县| 宣城市| 海淀区| 佛坪县| 凌云县| 西乌珠穆沁旗| 合江县| 盐边县| 舒兰市| 大竹县| 玉田县| 周宁县| 防城港市| 林口县| 桂林市| 江城| 榆社县| 商水县| 喜德县| 华坪县| 永平县| 松潘县| 德钦县| 汉源县| 成武县| 凌源市| 吉木乃县| 安宁市| 宁陕县| 兴安县|