layui tree点击标题选中加色实例代码

2024-11-11实例代码
179

layui tree 点击标题选中加色,具体实例代码如下:
layui.use('tree', function () {
                    var tree = layui.tree;
                    //渲染
                    stree = tree.render({
                        elem: '#demo2'  //绑定元素
                        , data: treeService
                        , showCheckbox: true
                        , click: function (obj) { //节点选中状态改变事件监听,全选框有自己的监听事件
                            console.log(obj);
                            var nodes = document.getElementsByClassName("layui-tree-txt");
                            for (var i = 0; i < nodes.length; i++) {
                                if (nodes[i].innerHTML === obj.data.title) {                       // if(obj.data.children){} //判断当前节点是否有子节点
                                    if (obj.data.children == null || obj.data.children.length == 0) {//判断是不是子节点(父节点对应的children不为空,且有的父节点长度为0也可代表子节点)
                                        nodes[i].style.color = "#555";//灰色
                                        nodes[i].checked = true;
                                        //将选中的值存储在Session
                                    } else {
                                        nodes[i].style.color = "#555";//灰色
                                    }
                                } else {
                                    nodes[i].style.color = "#555";//灰色
                                }
                            }
                        }
                    });
                });
The End

相关推荐

layui后台布局实例代码
layui后台布局的实例代码,以下是详细代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...
2025-10-15 实例代码
68

可自动切换的tab实例代码
可自动切换的tab实例代码,html代码如下: !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...
2025-09-16 实例代码
114

php数据处理:数组根据某字段进行分组
php数据处理:数组根据某字段进行分组,实例代码如下: /** * @description:根据数据 * @param {dataArr:需要分组的数据;keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...
2025-06-12 实例代码
188

LayUI登录页面页设计实例
实例代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...
2025-04-13 实例代码
234

MUI Picker Input设置默认时间回显实例代码
MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数:'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...
2025-01-09 实例代码
139

layui实现带清除按钮的输入框
layui实现带清除按钮的输入框,首先html文件如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...
2024-12-31 实例代码
200