7°

layui-tree 实现

<!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

全部评论: 0

    我有话说: