【layui2.8 tree组件】点击(click)节点名 实现 勾选 / 取消 状态

@[Layui Tree]组件点击节点 实现 勾选 / 取消 状态

最简洁方法：Layui 模拟点击事件实现

在Layui中，模拟点击可以使用jQuery的.click()方法来实现。假设你有一个Layui的按钮元素，它的选择器是 '#myButton'，你可以使用以下代码来模拟点击该按钮：

$('#myButton').click();

上述代码将触发 ID 为 myButton 的按钮元素的点击事件，模拟用户点击该按钮的行为。你可以将上述代码放在你需要模拟点击的适当位置，例如在某个函数中或者在某个事件触发时。

请注意，模拟点击只适用于可以通过JavaScript触发的事件，对于某些受限制的按钮或出于安全考虑的按钮，可能无法通过模拟点击来触发其行为。

具体实现方法：

 tree.render({
                elem: '#treeAuth',
                data: data,
                id:"treeAuth",
                customName:{
                    id: 'id',
                    title: 'name',
                    //children: 'child'
                },
                 //重点：onlyIconControl:true 必须 否则会与 展开伸缩 冲突
                onlyIconControl:true,               //是否仅允许节点左侧图标控制展开伸缩
                 //重点：showCheckbox: true,   必须 否则 无选择项
                showCheckbox: true,                 // 是否显示复选框
                //onlyIconControl: true,              // 是否仅允许节点左侧图标控制展开收缩
                //isJump: true,                       // 是否允许点击节点时弹出新窗口跳转
                click: function(obj){
                    var ischecked = obj.data.checked;           // 当前节点是否选中
                    var id = obj.data.id;                       // 当前节点id
                    var parent_id = obj.data.parent_id;         // 上级节点id
                    var this_elem = obj.elem;                   // 得到当前节点元素
                    //定位 当前节点的 复选框 元素
                    var checkbox = obj.elem.find('.layui-form-checkbox');
                    checkbox.click();		//模拟点击 复选框
                    console.log(checkbox);

                }
            });
        }
        

学习他人方法：勾选后做判断，如果不符合条件则取消勾选

实现方法：

使用 tree的oncheck事件，在回调函数中做判断，并确定是否取消勾选：

Tree.render({
    elem: '#menuTree',
    id: 'roleMenuTree',
    showCheckbox:true,
    data: tempData,
    oncheck: function(obj){
        //console.log(obj.data); // 得到当前点击的节点数据
        //console.log(obj.checked); // 节点是否被选中
        //console.log(obj.elem); // 得到当前节点元素

        if (obj.data.text==='菜单管理'){
            layer.msg('《菜单管理》不能选!');
            obj.elem.find('.layui-form-checked').removeClass('layui-form-checked');
            return;
        }
    }
});

即使用

obj.elem.find('.layui-form-checked').removeClass('layui-form-checked'); 		//取消勾选。

经过验证，在后边使用

 tree.getChecked(id) ；

获取已勾选的内容时，与页面显示的数据一致，无需特殊处理。

BUG：取消后 再次点击无法选中

解决方法：

        // 渲染 树结构数据
        function rendertree(data){
            tree.render({
                elem: '#treeAuth',
                data: data,
                id:"treeAuth",
                customName:{
                    id: 'id',
                    title: 'name',
                    //children: 'child'
                },
                //重点：onlyIconControl:true 必须 否则会与 展开伸缩 冲突
                onlyIconControl:true,               // 是否仅允许节点左侧图标控制展开伸缩
                showCheckbox: true,                 // 是否显示复选框
                //onlyIconControl: true,              // 是否仅允许节点左侧图标控制展开收缩
                //isJump: true,                       // 是否允许点击节点时弹出新窗口跳转
                click: function(obj){
                    console.log(obj.data.checked);      //当前节点是否选中
                    console.log(obj.data.id);           //当前节点id
                    console.log(obj.elem);          		// 得到当前节点元素

                    //Layui 当前节点 选中样式 (勾选样式)
                    var classStr = 'layui-unselect layui-form-checkbox layui-form-checked';	
                    //通过 样式名 定位当前节点元素
                    var checkbox = obj.elem.find('.layui-form-checkbox');
                    var classNameStr = checkbox[0].className;		//获取当前节点样式（className）

                    //判断 当前节点样式 是否包含 选中(勾选样式) 并执行 下一步操作
                    if (classNameStr === classStr){
                        checkbox.removeClass('layui-form-checked');			//删除 勾选样式
                    }else {
                        checkbox.addClass('layui-form-checked');					//添加 勾选样式
                    }
                    //obj.elem.find('.layui-form-checked').removeClass('layui-form-checked');
                    //layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
            });
        }