最近写了一棵权限树,因为在写之前到网上 google 了一下,好像没有比较完整且简单的做法,故将结果与各位共享一下。

我是将 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;

    //节点链接,默认是虚链接

    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

 

 

posted on 2006-05-14 09:11 野草 阅读(5830) 评论(17)  编辑  收藏 所属分类: html/js

评论:
# re: 简单灵活的权限树 2006-08-03 14:20 | 李fei
你好,你的这个权限树的源码下载后怎么是乱码呢?  回复  更多评论
  
# re: 简单灵活的权限树 2006-11-07 20:47 | empty
谢谢你的源码不错.简单灵活的权限树! ksks   回复  更多评论
  
# re: 简单灵活的权限树 2006-12-07 09:09 | wangmi
真的不错。我正需要呢。  回复  更多评论
  
# re: 简单灵活的权限树 2006-12-28 14:03 | sasfy
大忙  回复  更多评论
  
# re: 简单灵活的权限树 2007-01-20 18:54 | 地平线
为什么你的DTREE在JSP页面上显示不出来,脚本报错说dTree未定义呀?
在普通的html里面显示正常?  回复  更多评论
  
# re: 简单灵活的权限树 2007-06-08 10:38 | ran
为什么在我的jsp页面中有未定义的事件出现啊??

怎样才能改正啊??  回复  更多评论
  
# re: 简单灵活的权限树 2007-12-24 17:11 | Aly
呵呵 不错!顶一下  回复  更多评论
  
# re: 简单灵活的权限树 2008-03-28 16:04 | 于翔
不错,谢谢!  回复  更多评论
  
# re: 简单灵活的权限树[未登录] 2008-05-17 13:38 | yy
对checkbox再加上样式就完美了
style="VERTICAL-ALIGN:middle;WIDTH:11px;HEIGHT: 11px"  回复  更多评论
  
# re: 简单灵活的权限树 2008-06-18 15:45 |
为什么当子结点没有一个选中时,父结点却是选中的??  回复  更多评论
  
# re: 简单灵活的权限树 2008-07-22 08:04 | qun715715
谢谢提供,正需要这个树!  回复  更多评论
  
# re: 简单灵活的权限树 2009-06-18 21:28 | leizhihui
@李fei
  回复  更多评论
  
# re: 简单灵活的权限树 2010-03-17 10:28 | jj
很不错,学习了~  回复  更多评论
  
# : 简单灵活的权限树 2010-09-09 11:55 | sfd
有bug@jj
@jj
  回复  更多评论
  
# : 简单灵活的权限树 2010-09-09 11:55 | sfd
a  回复  更多评论
  
# re: 简单灵活的权限树 2011-11-27 19:25 | 龚杰
请问怎样和struts相结合啊  回复  更多评论
  
# re: 简单灵活的权限树 2014-08-29 16:49 | DSD酸
和struct结合一下呗  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问