zTree ctrl 多选功能

最新推荐文章于 2024-05-24 16:59:14 发布

公子七

最新推荐文章于 2024-05-24 16:59:14 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签：函数 ztree-ctrl ztree

本文链接：https://blog.youkuaiyun.com/u013380777/article/details/78130041

Web前端专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用ZTree实现Shift键进行多节点勾选的方法，通过回调函数和事件监听实现用户友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上多数写的是ztree shift 多选的功能实现，但是要配合用户习惯来说的话，比较多是用于 ctrl ,因此这个也是根据shift 来写的


 callback : { //回调函数  
            onCheck: zTreeOnCheck
       }

//处理shift键多节点勾选
            function zTreeOnCheck(event, treeId, treeNode) {
                 var preClickedNode = window.preClickedNode;  
                 window.preClickedNode=treeNode;  
                event = window.event||event;//兼容IE  
                if(event.ctrlKey){
                     if((!event.ctrlKey && !event.srcEvent.ctrlKey)||!preClickedNode){//event.srcEvent.shiftKey解决firefox兼容性问题
                         console.log("event ctrlKey error");
                         return;// shift键  
                     }
                     if(preClickedNode.getParentNode()!=treeNode.getParentNode()){  //是否同级
                         preClickedNode=null;  
                         return;  
                     }  
                     var obj = jQuery.fn.zTree.getZTreeObj(treeId);  
//                   obj.selectNode(preClickedNode,true);   //选择
                     var firstNode =obj.getNodeIndex(preClickedNode);  
                     var lastNode =obj.getNodeIndex(treeNode);  
                     var count = lastNode - firstNode;  
                     var nodeNew = preClickedNode;  
                     if (count > 0) {  
                         for (var i = 1; i < count; i++){  
                             nodeNew = nodeNew.getNextNode();  
                             if(!nodeNew)break;//用于排除隐患  
//                           obj.selectNode(nodeNew, true); //选择
                             obj.checkNode(nodeNew, true, true);//勾选
                         }  
                     }else {  
                         for (var j = 1; j < (-count); j++) {  
                             nodeNew = nodeNew.getPreNode();  
                             if(!nodeNew)break;//用于排除隐患  
//                           obj.selectNode(nodeNew, true); //选择
                             obj.checkNode(nodeNew, true, true);//勾选
                         }  
                     }
                }

                }