layui-treetable
/
demo3.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">
</head>

<body>
    <div id="demo"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">

layui.use(['tree', 'layer'], function(){
    var layer = layui.layer;

    layui.tree({
        elem: '#demo',
        check: 'checkbox',              //输入checkbox则生成带checkbox的tree, 默认不带checkbox
        skin: 'as',                     //设定皮肤
        drag: true,                     //点击每一项时是否生成提示信息
        checkboxName: 'selectedArr',    //复选框的name属性值
        checkboxStyle: "",              //设置复选框的样式，必须为字符串，css样式怎么写就怎么写
        click: function(item){          //节点点击事件
            layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));
            console.log(item);
        },
        nodes: [{
                "id": "1",
                "name": "父节点1",
                "children": [{
                        "id": "11",
                        "name": "子节点11"
                    },
                    {
                        "id": "12",
                        "name": "子节点12"
                    }
                ]
            },
            {
                "id": "2",
                "name": "父节点2",
                "children": [{
                    "id": "21",
                    "name": "子节点21",
                    "children": [{
                        "id": "211",
                        "name": "子节点211"
                    }]
                }]
            }
        ],
    });
});
</script>

</html>