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

最新推荐文章于 2021-06-29 16:45:04 发布

lw-留下的兵

最新推荐文章于 2021-06-29 16:45:04 发布

阅读量998

点赞数 1

分类专栏： easyui 文章标签： easyui checkbox-tree 联级勾选 tree节点横向展示

本文链接：https://blog.csdn.net/sinat_37356064/article/details/80699356

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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效果则是(子节点未全部选中，父节点不会被选中)

lw-留下的兵

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造

1、tree的叶子节点横向展示2、(a) 勾选根节点时，子节点全部联级选中，取消时同理； (b) 勾选非根节点时，该节点的所有父节点以及子节点全部选中 (c) 取消非根节点时，该节点的所有子节点取消，父节点不取消下面直接上代码吧，注释说明都在代码中&lt;body&gt; &lt;h2&gt;CheckBox Tree&lt;/h2&gt; &lt;p&gt;Tree node...
复制链接

扫一扫

专栏目录