layui-js/examples/tree.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>树模块 - layui</title>

    <link rel="stylesheet" href="../src/css/layui.css">

    <style>
        body {
            padding: 50px 100px;
        }
    </style>
</head>

<body>

    <ul id="demo"></ul>

    <ul id="demo1" style="margin-top: 50px;"></ul>

    <script src="../src/layui.js"></script>
    <script>
        layui.use('tree', function() {
            var tree = layui.tree({
                elem: '#demo' //指定元素
                    ,
                check: 'checkbox' //勾选风格
                    ,
                skin: 'as' //设定皮肤
                    //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
                    ,
                drag: true,
                props:{
                		  name: 'name',
                      id: 'id',
                      children:'children'
                },
                change:function(val){
                	 console.group('change event')
                  console.log('Array')
                  console.log(val);
                  console.groupEnd()
                },
                click: function(item) { //点击节点回调
                  console.group('click event')
                  console.log('Object')
                  console.log(item);
                  console.groupEnd()
                },
                addClick:function(item,elem,add){
                	  console.group('append event')
                  console.log('Object')
                  console.log(item);
                  console.log('dom')
                  console.log(elem);
                  console.log('dom add event')
                  var item ={
                     name: '测试节点'+new Date().getTime(),
                     id:-1
                 }
                  add(item)
                  console.groupEnd()
                },
                deleteClick:function(item,elem,done){
                	  console.group('delete event')
                  console.log('Object')
                  console.log(item);
                  console.log('dom')
                  console.log(elem);
                  console.log('dom delete event')
                  done();
                  console.groupEnd()
                },
                nodes: [ //节点
                    {
                        name: '常用文件夹',
                        id: 1,
                        alias: 'changyong',
                        children: [{
                            name: '所有未读',
                            id: 11
                                //,href: 'http://www.layui.com/'
                                ,
                            alias: 'weidu'
                        }, {
                            name: '置顶邮件',
                            id: 12
                        }, {
                            name: '标签邮件',
                            id: 13
                        }]
                    }, {
                        name: '我的邮箱',
                        id: 2,
                        spread: true,
                        children: [{
                            name: 'QQ邮箱',
                            id: 21,
                            spread: true,
                            children: [{
                                name: '收件箱',
                                id: 211,
                                children: [{
                                    name: '所有未读',
                                    id: 2111
                                }, {
                                    name: '置顶邮件',
                                    id: 2112
                                }, {
                                    name: '标签邮件',
                                    id: 2113
                                }]
                            }, {
                                name: '已发出的邮件',
                                id: 212
                            }, {
                                name: '垃圾邮件',
                                id: 213
                            }]
                        }, {
                            name: '阿里云邮',
                            id: 22,
                            children: [{
                                name: '收件箱',
                                id: 221
                            }, {
                                name: '已发出的邮件',
                                id: 222
                            }, {
                                name: '垃圾邮件',
                                id: 223
                            }]
                        }]
                    }
                ]
            });

            //生成一个模拟树
            var createTree = function(node, start) {
                node = node || function() {
                    var arr = [];
                    for (var i = 1; i < 10; i++) {
                        arr.push({
                            name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                        });
                    }
                    return arr;
                }();
                start = start || 1;
                layui.each(node, function(index, item) {
                    if (start < 10 && index < 9) {
                        var child = [{
                            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                        }];
                        node[index].children = child;
                        createTree(child, index + start + 1);
                    }
                });
                return node;
            };

            layui.tree({
                elem: '#demo1' //指定元素
                    ,
                nodes: createTree()
            });

        });
    </script>

    <!--<pre class="layui-code">
# layui.tree-v2 备忘
* check参数 - checkbox、radio的支持
* 拖拽的支持
</pre>-->

</body>

</html>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
+								<!DOCTYPE html>
 								<html>
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
+								<head>
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <meta charset="utf-8">
 								    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 								    <title>树模块 - layui</title>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <link rel="stylesheet" href="../src/css/layui.css">
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <style>
 								        body {
 								            padding: 50px 100px;
 								        }
 								    </style>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
+								</head>
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								<body>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <ul id="demo"></ul>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <ul id="demo1" style="margin-top: 50px;"></ul>
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								    <script src="../src/layui.js"></script>
 								    <script>
 								        layui.use('tree', function() {
 								            var tree = layui.tree({
 								                elem: '#demo' //指定元素
 								                    ,
 								                check: 'checkbox' //勾选风格
 								                    ,
 								                skin: 'as' //设定皮肤
 								                    //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
 								                    ,
 								                drag: true,
-												feat(tree): 加入props 属性适配器

											
										
										
											2018-07-15 16:41:04 +00:00
+								                props:{
 								                		  name: 'name',
 								                      id: 'id',
 								                      children:'children'
 								                },
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								                change:function(val){
 								                	 console.group('change event')
 								                  console.log('Array')
 								                  console.log(val);
 								                  console.groupEnd()
 								                },
 								                click: function(item) { //点击节点回调
 								                  console.group('click event')
 								                  console.log('Object')
 								                  console.log(item);
 								                  console.groupEnd()
 								                },
 								                addClick:function(item,elem,add){
 								                	  console.group('append event')
 								                  console.log('Object')
 								                  console.log(item);
 								                  console.log('dom')
 								                  console.log(elem);
 								                  console.log('dom add event')
 								                  var item ={
-												feat(tree): 加入props 属性适配器

											
										
										
											2018-07-15 16:41:04 +00:00
+								                     name: '测试节点'+new Date().getTime(),
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								                     id:-1
 								                 }
 								                  add(item)
 								                  console.groupEnd()
 								                },
 								                deleteClick:function(item,elem,done){
 								                	  console.group('delete event')
 								                  console.log('Object')
 								                  console.log(item);
 								                  console.log('dom')
 								                  console.log(elem);
 								                  console.log('dom delete event')
 								                  done();
 								                  console.groupEnd()
 								                },
 								                nodes: [ //节点
 								                    {
 								                        name: '常用文件夹',
 								                        id: 1,
 								                        alias: 'changyong',
 								                        children: [{
 								                            name: '所有未读',
 								                            id: 11
 								                                //,href: 'http://www.layui.com/'
 								                                ,
 								                            alias: 'weidu'
 								                        }, {
 								                            name: '置顶邮件',
 								                            id: 12
 								                        }, {
 								                            name: '标签邮件',
 								                            id: 13
 								                        }]
 								                    }, {
 								                        name: '我的邮箱',
 								                        id: 2,
 								                        spread: true,
 								                        children: [{
 								                            name: 'QQ邮箱',
 								                            id: 21,
 								                            spread: true,
 								                            children: [{
 								                                name: '收件箱',
 								                                id: 211,
 								                                children: [{
 								                                    name: '所有未读',
 								                                    id: 2111
 								                                }, {
 								                                    name: '置顶邮件',
 								                                    id: 2112
 								                                }, {
 								                                    name: '标签邮件',
 								                                    id: 2113
 								                                }]
 								                            }, {
 								                                name: '已发出的邮件',
 								                                id: 212
 								                            }, {
 								                                name: '垃圾邮件',
 								                                id: 213
 								                            }]
 								                        }, {
 								                            name: '阿里云邮',
 								                            id: 22,
 								                            children: [{
 								                                name: '收件箱',
 								                                id: 221
 								                            }, {
 								                                name: '已发出的邮件',
 								                                id: 222
 								                            }, {
 								                                name: '垃圾邮件',
 								                                id: 223
 								                            }]
 								                        }]
 								                    }
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
+								                ]
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								            });
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								            //生成一个模拟树
 								            var createTree = function(node, start) {
 								                node = node || function() {
 								                    var arr = [];
 								                    for (var i = 1; i < 10; i++) {
 								                        arr.push({
 								                            name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
 								                        });
 								                    }
 								                    return arr;
 								                }();
 								                start = start || 1;
 								                layui.each(node, function(index, item) {
 								                    if (start < 10 && index < 9) {
 								                        var child = [{
 								                            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
 								                        }];
 								                        node[index].children = child;
 								                        createTree(child, index + start + 1);
 								                    }
 								                });
 								                return node;
 								            };
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
+								            layui.tree({
 								                elem: '#demo1' //指定元素
 								                    ,
 								                nodes: createTree()
 								            });
 								        });
 								    </script>
 								    <!--<pre class="layui-code">
 								# layui.tree-v2 备忘
 								* check参数 - checkbox、radio的支持
 								* 拖拽的支持
 								</pre>-->
-.0.0

											
										
										
											2017-08-21 00:51:13 +00:00
 								</body>
-												feat(tree): 升级了tree

											
										
										
											2018-07-15 13:53:25 +00:00
 								</html>