layui-treetable
/
demo.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        p {
            margin-bottom: 20px;
        }
        .layui-form-checkbox[lay-skin=primary] {
            padding-left: 0
        }
    </style>
</head>

<body class="layui-row">
    <div class="layui-col-md3" style="padding: 10px 10px;">
        <!-- <div id="demo"></div> -->
    </div>
    <a href='https://gitee.com/shaojiepeng/layui-treetable'><img src='https://gitee.com/shaojiepeng/layui-treetable/widgets/widget_5.svg' alt='Fork me on Gitee'></img></a>
    <div class="layui-col-md6" style="padding: 10px 10px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基本功能</legend>
            <div class="layui-field-box">
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="expand" onmouseover="showTips1()">展开</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="collapse" onmouseover="showTips2()">收起</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="destory" onmouseover="showTips10()">销毁</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="all" onmouseover="showTips8()">获取所有节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="selected" onmouseover="showTips3()">获取选中节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="unSelected" onmouseover="showTips17()">获取未选中节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="getNode" onmouseover="showTips9()">获取节点信息</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="expandNode" onmouseover="showTips11()">展开节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="collapseNode" onmouseover="showTips12()">折叠节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkNode" onmouseover="showTips13()">勾选节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="uncheckNode" onmouseover="showTips14()">取消勾选节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkAllNode" onmouseover="showTips18()">勾选全部节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="unCheckAllNode" onmouseover="showTips19()">取消勾选全部节点</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="disableNode" onmouseover="showTips15()">禁用checkbox</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="ableNode" onmouseover="showTips16()">解禁checkbox</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="getNodeByParam" onmouseover="showTips20()">查找节点</button>

                </p>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>编辑功能</legend>
            <div class="layui-field-box">
                <p>
                    <button class="layui-btn layui-btn-sm" id="addNode2" onmouseover="showTips4()">添加根节点</button>
                    <button class="layui-btn layui-btn-sm" id="addNode" onmouseover="showTips5()">添加子节点</button>
                </p>

                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="editNode" onmouseover="showTips6()">编辑节点</button>
                </p>

                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" id="removeNode" onmouseover="showTips7()">删除节点</button>
                </p>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>使用手册</legend>
            <div class="layui-field-box">
                请点击<a href="https://gitee.com/shaojiepeng/layui-treetable/wikis/pages" target="_blank" style="color: #009bff;">Wiki</a>
            </div>
        </fieldset>

        <div id="demo"></div>
    </div>
    <div class="layui-col-md3" style="padding: 10px 10px;"></div>
</body>
<script src="layui/layui.js"></script>
<script src="demo.js"></script>
<script type="text/javascript">

function del(row) {
    alert(row.id)
}

var layout = [
    { name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
    { name: 'id', field: 'id', headerClass: 'value_col', colClass: 'value_col', style: ''},
    { name: '文本', field: 'text', headerClass: 'value_col', colClass: 'value_col', style: ''},
    {
        name: '操作',
        headerClass: 'value_col',
        colClass: 'value_col',
        style: 'width: 20%',
        render: function(row) {
            return "<a class='layui-btn layui-btn-danger layui-btn-sm' onclick='del(" + row + ")'><i class='layui-icon'>&#xe640;</i> 删除</a>"; //列渲染
        }
    },
];

layui.use(['form', 'treetable', 'layer'], function() {
    var layer = layui.layer, form = layui.form, $ = layui.jquery;

    var tree = layui.treetable({
        elem: '#demo', //传入元素选择器
        spreadable: false, //设置是否全展开，默认不展开
        checkbox : true,
        nodes: [{
                "id": "1",
                "name": "父节点1",
                "text":"测试",
                "checked" : false,
                "children": [{
                        "id": "11",
                        "name": "子节点11",
                        "text":""
                    },
                    {
                        "id": "12",
                        "name": "子节点12",
                        "text":""
                    }
                ]
            },
            {
                "id": "2",
                "name": "父节点2",
                "text":"",
                "checked" : true,
                "children": [{
                    "id": "21",
                    "name": "子节点21",
                    "text":"",
                    "children": [{
                        "id": "211",
                        "name": "子节点211",
                        "text":""
                    }]
                }]
            },
            {
                "id": "3",
                "name": "父节点3",
                "text":"",
            }
        ],
        layout: layout,
        callback: {
            beforeCheck : treetableBeforeCheck,
            onCheck : treetableOnCheck,
            beforeCollapse : treetableBeforeCollapse,
            onCollapse : treetableOnCollapse,
            beforeExpand : treetableBeforeExpand,
            onExpand : treetableOnExpand,
        }
    });

    function treetableBeforeCheck(node){
        alert("回调方法treetableBeforeCheck");
        return true;
    };
    function treetableOnCheck(node){
        alert("回调方法treetableOnCheck");
    };
    function treetableBeforeCollapse(){
        alert("回调方法treetableBeforeCollapse");
        return true;
    };
    function treetableOnCollapse(){
        alert("回调方法treetableOnCollapse");
    };
    function treetableBeforeExpand(){
        alert("回调方法treetableBeforeExpand");
        return true;
    };
    function treetableOnExpand(){
        alert("回调方法treetableOnExpand");
    };

    form.render();

    $('#collapse').on('click', function() {
        tree.collapse();
    });

    $('#expand').on('click', function() {
        tree.expand();
    });

    $('#selected').on('click', function() {
        console.log(tree.getSelected());
        alert(JSON.stringify(tree.getSelected()));
    });

    $('#unSelected').on('click', function() {
        console.log(tree.getUnSelected());
        alert(JSON.stringify(tree.getUnSelected()));
    });

    $('#editNode').on('click', function() {
        var node = tree.getNode("3");
        node.name = '我就是变个名字';
        tree.editNodeName(node);
    });

    $('#removeNode').on('click', function() {
        var node = tree.getNode("2");
        tree.removeNode(node);
    });

    $('#getNode').on('click', function() {
        var node = tree.getNode("2");
        alert(JSON.stringify(node));
    });

    $('#getNodeByParam').on('click', function() {
        var node = tree.getNodeByParam("name", "子节点21", null);
        alert(JSON.stringify(node));
    });

    $('#all').on('click', function() {
        alert(JSON.stringify(tree.getNodes()));
    });

    $('#addNode').on('click', function() {
        tree.addNode(tree.getNode("2"), {
            "id": "22", "name": "子节点22", "text":"", "children": [{
                "id": "221",
                "name": "子节点221",
                "text":"",
                "children": [{
                    "id": "2211",
                    "name": "子节点2211",
                    "text":"",
                    "children": [{
                        "id": "22111",
                        "name": "子节点22111",
                        "text":"",
                    }]
                }]
            },
            {
                "id": "222",
                "name": "子节点222",
                "text":"",
                "children": [{
                    "id": "2221",
                    "name": "子节点2221",
                    "text":"",
                    "children": [{
                        "id": "22211",
                        "name": "子节点22211",
                        "text":"",
                    }]
                }]
            }]
        });
    });

    $('#addNode2').on('click', function() {
        tree.addNode(null, {
            "id": "4", "name": "父节点4", "text":"", "children": [{
                "id": "41",
                "name": "子节点41",
                "text":"",
                "children": [{
                    "id": "411",
                    "name": "子节点411",
                    "text":"",
                    "children": [{
                        "id": "4111",
                        "name": "子节点4111",
                        "text":"",
                    }]
                }]
            },
            {
                "id": "42",
                "name": "子节点42",
                "text":"",
                "children": [{
                    "id": "421",
                    "name": "子节点421",
                    "text":"",
                    "children": [{
                        "id": "4211",
                        "name": "子节点4211",
                        "text":"",
                    }]
                }]
            }]
        });
    });

    $('#destory').on('click', function() {
        tree.destory();
    });

    $('#expandNode').on('click', function() {
        tree.expandNode(tree.getNode("2"), false);
    });

    $('#collapseNode').on('click', function() {
        tree.collapseNode(tree.getNode("2"), false);
    });

    $('#checkNode').on('click', function() {
        tree.checkNode(tree.getNode("1"), true);
    });

    $('#uncheckNode').on('click', function() {
        tree.checkNode(tree.getNode("1"), false);
    });

    $('#disableNode').on('click', function() {
        tree.setChkDisabled(tree.getNode("1"), true);
    });

    $('#ableNode').on('click', function() {
        tree.setChkDisabled(tree.getNode("1"), false);
    });

    $('#checkAllNode').on('click', function() {
        tree.checkAllNodes(true);
    });

    $('#unCheckAllNode').on('click', function() {
        tree.checkAllNodes(false);
    });

});


</script>

</html>