forked from layui/layui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request layui#295 from nmxiaowei/master
new atree
- Loading branch information
Showing
10 changed files
with
652 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # atree2.0.0属性含义 | ||
| * spreadAll 设置checkbox全部选中 | ||
| * check勾选风格，不写没有勾选框 | ||
| * props 设置key属性别名 | ||
| - addBtnLabel：新增按钮标题 | ||
| - deleteBtnLabel：删除按钮标题 | ||
| - name：树显示的标题 | ||
| - id：主键对应的字段名 | ||
| - children：子类对应的字段名 | ||
| - checkbox：选中对应的字段名 | ||
| - spread：是否展开对应的字段名 | ||
| * change选中回调函数 | ||
| - val：选中的对象数组 | ||
| * click点击标题回调函数 | ||
| - item：当前点击的对象 | ||
| * addClick：新增回调函数 | ||
| - item：当前父节点的对象 | ||
| - elem：当前节点的dom对象 | ||
| - done：添加到dom节点的方法 | ||
| * deleteClick：删除回调函数 | ||
| - item：当前父节点的对象 | ||
| - elem：当前节点的dom对象 | ||
| - done：删除dom节点的方法 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| <!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> | ||
|
|
||
| <script src="../src/layui.js"></script> | ||
| <script> | ||
| layui.use('atree', function() { | ||
| var tree = layui.atree({ | ||
| elem: '#demo' //指定元素 | ||
| , | ||
| check: 'checkbox' //勾选风格 | ||
| , | ||
| skin: 'as' //设定皮肤 | ||
| //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效） | ||
| , | ||
| // drag: true, | ||
| spreadAll:true, | ||
| props:{ | ||
| addBtnLabel:'新增', | ||
| deleteBtnLabel:'删除', | ||
| name: 'name', | ||
| id: 'id', | ||
| children:'children', | ||
| checkbox:'checkbox', | ||
| spread:'spread' | ||
| }, | ||
| 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, | ||
| spread: true, | ||
| children: [{ | ||
| name: '所有未读', | ||
| checkbox:true, | ||
| 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 | ||
| }] | ||
| }] | ||
| } | ||
| ] | ||
| }); | ||
|
|
||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Oops, something went wrong.