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 }  

     

  • 相关阅读:
    关于使用css3属性:transform固定菜单位置,在滑动页面时菜单闪现抖动的问题
    使用iscroll.js插件时,遇到在Android端无法点击a超链的解决办法
    window.external的使用
    SpringMVC的拦截器(Interceptor)和过滤器(Filter)的区别与联系
    chain.doFilter(request,response)含义
    巧用Ajax的beforeSend 提高用户体验
    getRequestDispatcher(path).forward(),,执行完,后面的代码居然还会执行!!!记得加return 啊亲
    @JsonSerialize(include=JsonSerialize.Inclusion.NON_NULL)
    ajax修改表单的值后dom没更新的解决办法
    .net core json序列化首字符小写和日期格式处理
  • 原文地址:https://www.cnblogs.com/simfe/p/2521439.html
Copyright © 2011-2022 走看看