首页 | 1925 | 10 | 851 | 添加收藏 上一个 下一个
带有复选框可折叠的树形结构

1、文件体积缩小到了180kb左右


2、可以给每个复选框添加一些额外数据,即给复选框添加data-xxx="yyy"属性


<ul id="demo">
</ul>
<script>
    layui.use('tree',
    function() {
        var tree = layui.tree({
            elem: '#demo',
            //指定元素,生成的树放到哪个元素上
            check: 'checkbox',
            //勾选风格
            skin: 'as',
            //设定皮肤
            drag: true,
            //点击每一项时是否生成提示信息
            checkboxName: 'aa[]',
            //复选框的name属性值
            checkboxStyle: "",
            //设置复选框的样式,必须为字符串,css样式怎么写就怎么写
            click: function(item) { //点击节点回调
                console.log(item)
            },
            nodes: [ //节点
            {
                name: '常用文件夹',
                //节点名称
                spread: true,
                //是否是展开状态,true为展开状态
                href: "http://www.baidu.com",
                //设置节点跳转的链接,如果不设置则不会跳转
                target: "_self",
                //节点链接打开方式
                alias: 'changyong',
                checkboxValue: 1,
                //复选框的值
                checked: true,
                //复选框默认是否选中
                children: [{
                    name: '所有未读',
                    alias: 'weidu',
                    checked: true,
                    checkboxValue: 2
                },
                {
                    name: '置顶邮件',
                },
                {
                    name: '标签邮件',
                    checked: false,
                    checkboxValue: 3
                }]
            },
            {
                name: '我的邮箱',
                checked: true,
                spread: true,
                children: [{
                    name: 'QQ邮箱',
                    checked: true,
                    checkboxValue: 4,
                    spread: true,
                    children: [{
                        name: '收件箱',
                        checked: false,
                        checkboxValue: 5,
                        children: [{
                            name: '所有未读',
                            checked: false,
                            checkboxValue: 6,
                            children: [{
                                name: '一周未读',
                                checked: false,
                                checkboxValue: 6
                            }]
                        },
                        {
                            name: '置顶邮件',
                            checked: false,
                            checkboxValue: 7
                        },
                        {
                            name: '标签邮件',
                            checked: false,
                            checkboxValue: 8
                        }]
                    },
                    {
                        name: '已发出的邮件',
                        checked: false,
                        checkboxValue: 9
                    },
                    {
                        name: '垃圾邮件',
                        checked: false,
                        checkboxValue: 10
                    }]
                },
                {
                    name: '阿里云邮',
                    checked: true,
                    checkboxValue: 11,
                    children: [{
                        name: '收件箱',
                        checked: true,
                        checkboxValue: 12
                    },
                    {
                        name: '已发出的邮件',
                        checked: true,
                        checkboxValue: 13
                    },
                    {
                        name: '垃圾邮件',
                        checked: true,
                        checkboxValue: 14
                    }]
                }]
            }]
        });
</script>