LuTree.js 文件夹插件jquery无限级树形目录插件-BFW插件库

LuTree.js 文件夹插件jquery无限级树形目录插件

tree插件

第一步引入bfwone

第二步引入执行

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFWONE.JS DEMO PAGE</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script id="bfwone" data="dep=jquery.17&err=0"  src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script>
        //预加载数据格式
        var arr = [{
            id: 1,
            name: "一级",
            open: true,
            child: [{
                id: 5,
                name: "二级",
                type: 'leaf'
            },
                {
                    id: 6,
                    name: "二级",
                    child: [{
                        id: 7,
                        name: "三级",
                        type: 'leaf'
                    },
                        {
                            id: 9,
                            name: "三级",
                            child: [{
                                id: 10,
                                name: "四级",
                                child: [{
                                    id: 11,
                                    name: "五级",
                                    type: 'leaf'
                                },
                                    {
                                        id: 12,
                                        name: "五级",
                                        type: 'leaf'
                                    }]}]}]}]
        }, {
            id: 2,
            name: "一级",
            child: [{
                id: 3,
                name: "二级",
                pid: 2,
                type: 'leaf'
            },
                {
                    id: 3,
                    name: "二级",
                    pid: 2,
                    type: 'leaf'
                }, {
                    id: 4,
                    name: "二级",
                    pid: 2,
                    type: 'leaf'
                }]
        }, {
            id: 8,
            name: "一级",
            pid: 0,
            type: 'leaf'
        }];
        bready(function() {
            use(["LuTree"], function() { 

                //无限级菜单生成
                $("#tree").LuTree({
                    arr: arr,
                    sign: true,
                    simIcon: "fa fa-file-o", //叶子图标
                    mouIconOpen: " fa fa-folder-open", //展开图标
                    mouIconClose: "fa fa-folder", //关闭图标
                    callback: function(id) {
                        console.log("你选择的id是" + id);
                    }
                });

            });
        });
    </script>
</head>
<body>
	<div id="tree">

	</div>

</body>
</html>