利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造

1、tree的叶子节点横向展示

2、(a) 勾选根节点时，子节点全部联级选中，取消时同理；

(b) 勾选非根节点时，该节点的所有父节点以及子节点全部选中

下面直接上代码吧，注释说明都在代码中

<body><h2>CheckBox Tree</h2><p>Tree nodes with check boxes.</p><div style="margin:20px 0;"><a href="#" class="easyui-linkbutton" οnclick="getChecked()">GetChecked</a> </div><div class="easyui-panel" style="padding:5px"><ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,checkbox:true"></ul></div><script type="text/javascript">function getChecked(){var nodes = $('#tt').tree('getChecked');var s = '';for(var i=0; i<nodes.length; i++){if (s != '' && nodes[i].text != '') s += ',';s += nodes[i].text;}alert(s);}var on_off;//初始化开关var child_checked_flag = false; //子节点勾选开关var father_checked_flag = true; //父节点勾选开关var get_child_flag = true; //获取子节点开关var initial_children = []; //子节点集   只获取第一次onCheck事件中的子节点$('#tt').tree({cascadeCheck: false,onBeforeLoad: function(node, param){on_off = false;  //初始化时，不触发onCheck事件},onLoadSuccess:function(nodes,data){//叶子节点横向展示$('#tt').find("ul >li:not(:has(ul))").css('float', 'left'); // 选择最后一个节点 并添加 float:left$('#tt').find("li:has(ul)").css('clear', 'both');        // 给非最后节点添加 clear:both//对text值为空的节点进行隐藏，对于二级菜单就是叶子节点的，如果需要竖列展示，// 就需要给该叶子节点添加一个空的子节点，即子节点的id和text都为空$('.tree-title:empty').parent().css('display','none');on_off = true;//加载完成，正常开启onCheck事件 ，},onCheck:function(node,checked){if(on_off){var parentNode = $('#tt').tree('getParent', node.target);if(get_child_flag){//只获取第一次onCheck事件中的子节点, 后续节点触发onCheck事件时关闭，不让进入initial_children = $('#tt').tree('getChildren', node.target);}if(checked){if(father_checked_flag){if(parentNode != null){//如果不是根节点get_child_flag = false;if(parentNode.checked){child_checked_flag = true;}else{//js控制  会触发onCheck事件  但是当父节点为选择状态时不会触发$('#tt').tree('check', parentNode.target);//父节点勾选}} else {child_checked_flag = true;}}if (child_checked_flag) {father_checked_flag = false;get_child_flag = false;for (var i = 0; i < initial_children.length; i++) {//通过js控制  会触发onCheck事件$('#tt').tree('check', initial_children[i].target);//子节点勾选，}}}else{get_child_flag = false;for (var i = 0; i < initial_children.length; i++) {$('#tt').tree('uncheck', initial_children[i].target);//子节点取消勾选}}}//每次点击完后， 初始化全局变量child_checked_flag = false;father_checked_flag = true;get_child_flag = true;initial_children = [];}})</script>
</body>

效果图如下，弹框中为选中的值，如果是原装的easyui-tree效果则是(子节点未全部选中，父节点不会被选中)

利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造相关推荐

element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
EasyUI中tree选中父节点自动选中子节点，取消子节点自动取消父节点，子节点勾选完毕自动勾选父节点
今天有需求,将树设为具有全选功能选中父节点自动全选子节点全选状态下,当用户取消某一个子节点,自动取消父节点的勾选未全选状态下,用户勾选全部子节点,自动勾选对应的父节点感觉挺简单,实际写的时候才 ...
div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点 ...
element-ui tree 点击章节节点勾选/取消勾选
element-ui tree 点击章节节点勾选/取消勾选遇到一个需求,要求点击tree组件的章节时(不是点击checkBox),要进行节点勾选/取消勾选操作: 原本想的方案非常复杂,涉及到遍历父子 ...
easyui tree 检索树节点（3）
1.检索树节点的调用方法 function searchTreeFunc(){ $("#tree").tree("searchTree",$("#s ...
element tree ui 全选_element-ui Tree之懒加载叶子节点设置半选效果
本来是不太想动的... 无可奈何,看到一句话[业精于勤, 荒于嬉]便还是动手写一写加深理解的同时给以后的自己留个备份吧... element-ui Tree组件如何给具有懒加载的tree设置半选效果? ...
EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是方法2:官方文档中: ...
mysql 分组查出来横向展示_Mysql探索（一）:B+Tree索引
MySQL是目前业界最为流行的关系型数据库之一,而索引的优化也是数据库性能优化的关键之一.所以,充分地了解MySQL索引有助于提升开发人员对MySQL数据库的使用优化能力. MySQL的索引有很多种 ...

利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造

利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造相关推荐

最新文章

热门文章