zoukankan      html  css  js  c++  java
  • JQuery EasyUI之treegrid级联勾选的简单改进版

    最近需要搞点权限方面的东西,后台用的是Jquery Easyui treegrid 1.2.6,可惜没有级联勾选功能

    Tree如下格式

    0

    ----1

    --------2

    --------3

    ----4

    --------5

    --------6

    --------7

    根节点是0,级别是0,有两个子节点1,4,级别为1,

    子节点1,4各自有多节点分别是2,3和5,6,7,级别为2

    需求如下

    1.选择根节点0的时候,必须选择所有后代节点,1-7全部都要被选择

    2.取消选择根节点0的时候,必须取消选择所有后代节点,1-7全部都要被取消选择

    3.当选择节点1的时候,必须将1的父节点0也选择,但此时0的其它子节点就不能自动被选择了,保持原样

    4.取消1节点的时候,同2步,后代节点2,3都取消

    5.当选择2节点的时候,需要选择1,0两个节点,

    6.取消2的时候,需要看3是否有没有被选择,如果有则1选择,如果3没选,则1不选,0是否被选需要看1或者4有没有被选择

    总结一下

    1.选择某节点的时候,必须选择这个节点下面的所有后代节点,反之,取消选择后代子节点

    2.选择某节点的时候,必须将此节点的父节点选上,包含所有前代父节点

    取消某节点的时候,如果此节点的兄弟节点都没有被选择,那么父节点,也取消选择,

    换句话说就是需要看父节点下面的子节点有没有被选择的,有那么父节点仍然选择,如果没有一个被选择,那么父节点也取消选择

    -------------找前人的劳动成功

    搜索到一篇文章,感谢原作者

    treegrid级联勾或深度级联勾扩展:两种扩展

    里面有两种方式实现了上述需求的的1,实现2中的一部分,

    不过在取消节点时候,父节点是否取消有点问题

    我主要是用第二种方式(属性方式,非函数方式),这里我加上了一个函数 判断父节点是否需要被取消

     1 /** 
     2  * 级联判断父节点 的子节点是否有被选择的
     3  * @param {Object} target 
     4  * @param {Object} id 节点ID 
     5  * @return {TypeName}  
     6  */  
     7 function IsParentHasSelectedChildren(target,id,idField,status)
     8 {
     9     var count=0;
    10     var children = target.treegrid('getChildren',id);    
    11     var selectNodes = $(target).treegrid('getSelections');//获取当前选中项     
    12     var p=target.treegrid('find',id);  
    13     //注意,这里的children是指后代所有子节点,不是指儿子节点,所以要加上children[i]['_parentId']==p[idField]过滤出儿子节点
    14     for(var i=0;i<children.length ;i++  )
    15     {
    16         var childId = children[i][idField];  
    17         for(var j=0;j<selectNodes.length;j++){  
    18             if(selectNodes[j][idField]==childId && children[i]['_parentId']==p[idField])  
    19                 count++;
    20         }
    21     }
    22     //注意,click 函数在unselect事件之前运行,这里需要减去自己
    23     return count-1>0;
    24 }

    主要是增加函数IsParentHasSelectedChildren,父节点下面的儿子节点被选择的个数是否大于0来判断是否取消父节点

     里面最后count减一,是当前click事件是在onselect事件有关,表示排除自己,这里没有详细研究,

    在函数selectParent的里面加上第九行调用的

     1 function selectParent(target,id,idField,status){  
     2     var parent = target.treegrid('getParent',id);  
     3     if(parent){  
     4         var parentId = parent[idField];  
     5         if(status)  
     6             target.treegrid('select',parentId);  
     7         else  
     8         {
     9             if (!IsParentHasSelectedChildren(target,parentId,idField))
    10                 target.treegrid('unselect',parentId);  
    11         }
    12         selectParent(target,parentId,idField,status);  
    13     }  
    14 }  

     

  • 相关阅读:
    Codeforces Round #627 (Div. 3) 总结
    [IOI1994] 时钟
    收集一些优秀的甲方安全开源项目
    python基础——对时间进行加减
    JSFinder:一个在js文件中提取URL和子域名的脚本
    python对齐输出
    python使用smtplib发送邮件
    任务2:扫描渗透测试(50分)[2019年信息安全管理与评估赛题答案-01]
    记一次Xmrig挖矿木马排查过程
    Bypass xss过滤的测试方法
  • 原文地址:https://www.cnblogs.com/simfe/p/2521439.html
Copyright © 2011-2022 走看看