layui-tree 实现

最新推荐文章于 2024-05-03 11:55:08 发布

chuangshaoxia5899

最新推荐文章于 2024-05-03 11:55:08 发布

阅读量388

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/wsxiao/blog/3072058

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <menuName>树组件</menuName>
    <link rel="stylesheet" href="assets/component/layui/css/layui.css">
    <!--<link rel="stylesheet" href="https://layui.hcwl520.com.cn/layui/css/layui.css">-->
</head>
<body>
<div id="rolesTree"></div>
<script src="./assets/component/layui/layui.js"></script>
<!--<script src="https://layui.hcwl520.com.cn/layui/layui.js"></script>-->
<script>
    // https://www.layui.com/doc/modules/tree.html
    layui.use('tree', function() {
        var tree = layui.tree;

        //渲染
        var inst1 = tree.render({
            elem: '#rolesTree',             //绑定元素
            showCheckbox: true,          // 是否展示复选框 false
            edit: false,                 // 是否支持编辑 false
            accordion: false,            // 手风琴模式 false - true:互斥
            isJump: false,               // 是否允许节点跳转 false - true:与data下面的href属性一起用
            showLine: true,              // 是否开启链接线 true
            text: {
                defaultNodeName: '未命名' //节点默认名称
                , none: '无数据' //数据为空时的提示文本
            },
            data: [{
                menuName: 'MES', //一级菜单
                id: 'menu1',
                // spread: true,             // 节点是否展开 false - true：适用于有children
                disabled: false,          // 节点复选框是否禁用 false - true：不影响子节点的禁用状态
                checked: false
                , children: [{
                    menuName: '订单管理' //二级菜单
                    ,checked: false
                    , children: [{
                        menuName: 'crs-订单', //三级菜单
                        checked: true   // 节点是否为开启状态 false - true：子节点与父节点不能同时开启，否则会取反
                    }, {
                        menuName: '积分-订单', //三级菜单
                        checked: true
                    }, {
                        menuName: '商户端-订单', //三级菜单
                        checked: false
                    },]
                }, {
                    menuName: '商品管理' //二级菜单
                    ,checked: false
                    , children: [{
                        menuName: '高新区', //三级菜单
                        checked: true
                    }, {
                        menuName: '昌南区', //三级菜单
                        checked: false
                    }, {
                        menuName: '昌西区', //三级菜单
                        checked: false
                    },]
                },]
            }, {
                menuName: 'UA' //一级菜单
                ,checked: false
                , children: [{
                    menuName: '用户管理', //二级菜单\
                    children: []
                    ,checked: true
                },{
                    menuName: '权限管理', //二级菜单
                    children: [{
                        menuName:'组织架构',
                        checked: true
                    },{
                        menuName:'组织架构2',
                        checked: false
                    },]
                    ,checked: false
                },{
                    menuName: '财务管理', //二级菜单
                    children: [{
                        menuName:'添加余额'
                    }]
                    ,checked: false
                },]
            }]
            , click: function (obj) {
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素

                console.log(obj.data.children); //当前节点下是否有子节点
            }
            ,id: 'demoId'
            , oncheck: function (obj) {
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素
            }
            ,operate: function(obj) {
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素

                //Ajax 操作
                console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                var id = data.id; //得到节点索引
                if (type === 'add') { //增加节点
                    //返回 key 值
                    return 123;
                } else if (type === 'update') { //修改节点
                    console.log('编辑')

                } else if (type === 'del') { //删除节点
                    console.log('删除')

                }
            }
        });


        //执行节点勾选
        tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
        tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

        var checkData = tree.getChecked('demoId');  // 获得选中的节点。

        console.log('当前选中的',checkData)
    })
</script>
</body>
</html>

转载于:https://my.oschina.net/wsxiao/blog/3072058