diff --git a/examples/atree.html b/examples/atree.html index b8b27f5..5b2eed6 100644 --- a/examples/atree.html +++ b/examples/atree.html @@ -30,11 +30,14 @@ skin: 'as' //设定皮肤 //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效） , - drag: true, +// drag: true, + spreadAll:true, props:{ name: 'name', id: 'id', - children:'children' + children:'children', + checkbox:'checkbox', + spread:'spread' }, change:function(val){ console.group('change event') @@ -101,8 +104,10 @@ children: [{ name: '收件箱', id: 211, + spread: true, children: [{ name: '所有未读', + checkbox:true, id: 2111 }, { name: '置顶邮件', diff --git a/src/css/layui.css b/src/css/layui.css index 6289fb1..8c8a489 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -902,19 +902,23 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-tree{line-height: 26px;} .layui-tree li{position:relative;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;} .layui-tree li a, -.layui-tree li .layui-tree-spread{display: inline-block; vertical-align: top; height: 26px; *display: inline; *zoom:1; cursor: pointer;} +.layui-tree li .layui-tree-spread{display: inline-block; vertical-align: top;font-size: 12px; height: 26px; *display: inline; *zoom:1; cursor: pointer;color: #c0c4cc} .layui-tree li a{font-size: 0;} .layui-tree li a i{font-size: 16px;} -.layui-tree li a cite{padding: 0 6px; font-size: 14px; font-style: normal;} -.layui-tree li i{padding-left: 6px; color: #333; -moz-user-select: none;} -.layui-tree li .layui-tree-check{font-size: 13px;} -.layui-tree li .layui-tree-check:hover{color: #009E94;} -.layui-tree li ul{display: none; margin-left: 40px;} +.layui-tree li a cite{padding: 0 6px; font-size: 14px; font-style: normal;color: #606266;} +.layui-tree li i{padding-left: 6px; -moz-user-select: none;} +.layui-tree li .layui-tree-check{font-size: 16px;color: #dcdfe6} +.layui-tree li .layui-tree-check:hover{color: #409eff;} +.layui-tree li .layui-tree-check.is-checked{color: #409eff;} +.layui-tree li ul{ display:none;margin-left: 40px;} .layui-tree li .layui-tree-enter{line-height: 24px; border: 1px dotted #000;} .layui-tree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap} .layui-tree-drag i{padding-right: 5px;} +.layui-tree-node{position: relative;} +.layui-tree-node:hover { background-color:#eee;} .layui-tree-menu{position: absolute;top:0;right: 0;z-index:1024;} .layui-tree-menu span{margin-left: 10px;} + /** 导航菜单 **/ .layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;} .layui-nav *{font-size: 14px;} diff --git a/src/lay/modules/atree.js b/src/lay/modules/atree.js index cfbd22d..4c80a19 100644 --- a/src/lay/modules/atree.js +++ b/src/lay/modules/atree.js @@ -17,16 +17,21 @@ layui.define('jquery', function(exports) { var props ={ name: 'name', id: 'id', - children:'children' + children:'children', + checkbox:'checkbox', + spread:'spread' }; var enterSkin = 'layui-tree-enter', Tree = function(options) { this.options = options; + this.nodes = options.nodes || []; this.props = this.options.props || props; this.nameKey = this.props.name || props.name; this.idKey = this.props.id || props.id; this.childrenKey = this.props.children || props.children; + this.checkboxKey = this.props.checkbox || props.checkbox; + this.spreadKey = this.props.spread || props.spread; }; //图标 var icon = { @@ -53,11 +58,17 @@ layui.define('jquery', function(exports) { var that = this, options = that.options var nodes = children || options.nodes; - layui.each(nodes, function(index, item) { var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; - var ul = $(''); - var li = that.getNode(item, hasChild); + var dom = that.getDom(item); + var ul = $(dom.ul(item)); + var li = $(that.getNode(item)); + + //如果被选中加入checkbox集合里 + if(item[that.checkboxKey]){ + changeList.push(item); + } + //如果有子节点，则递归继续生成树 if(hasChild) { li.append(ul); @@ -72,31 +83,34 @@ layui.define('jquery', function(exports) { }; //节点dom拼接 - Tree.prototype.getDom = function() { + Tree.prototype.getDom = function(item) { var that = this, - options = that.options + options = that.options, + item = item, + hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; return { - spread: function(item, hasChild) { + spread: function() { return hasChild ? '' + ( - item.spread ? icon.arrow[1] : icon.arrow[0] + item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] ) + '' : ''; }, - checkbox: function(item) { + checkbox: function() { return options.check ? ( - '' + ( - options.check === 'checkbox' ? icon.checkbox[0] : ( - options.check === 'radio' ? icon.radio[0] : '' - ) + '' + ( + item[that.checkboxKey]? icon.checkbox[1] : icon.checkbox[0] ) + '' ) : ''; }, - node: function(item) { + ul:function(){ + return '' + }, + node: function() { return '' + ('' + (item[that.nameKey] || '未命名') + '') }, - menu: function(item) { + menu: function() { return '
' + 'Add' + 'Delete' + @@ -106,28 +120,32 @@ layui.define('jquery', function(exports) { } //获取树节点 - Tree.prototype.getNode = function(item, hasChild) { + Tree.prototype.getNode = function(item) { var that = this, options = that.options - var dom = that.getDom(); - var li = $(['
  • ' + var dom = that.getDom(item); + var li = ['
  • ' //展开箭头 , - dom.spread(item, hasChild) + dom.spread() - //复选框/单选框 + //复选框 , - dom.checkbox(item) + dom.checkbox() //节点 , - dom.node(item) + dom.node() //菜单 , dom.menu() , - '
    • ' - ].join('')); + '
    ' + ].join(''); return li; } @@ -162,27 +180,33 @@ layui.define('jquery', function(exports) { Tree.prototype.add = function(elem, item) { var that = this, options = that.options; - var addBtn = elem.children('.layui-tree-menu').children('.layui-tree-add') - var arrow = elem.children('.layui-tree-spread') + var node =elem.children('.layui-tree-node'); + var addBtn = node.children('.layui-tree-menu').children('.layui-tree-add') + var arrow = node.children('.layui-tree-spread') var ul = elem.children('ul'), - a = elem.children('a'); + a = node.children('a'); var addEvent = function(e) { layui.stope(e); var _addEvent = { add: function(itemAddObj) { + if(!item[that.childrenKey]){ + item[that.childrenKey] = []; + } + item[that.childrenKey].push(itemAddObj); + var dom = that.getDom(item); if(!ul[0]) { - ul = $(''); + ul = $(dom.ul()) elem.append(ul); } if(!arrow[0]) { - arrow = $('' + icon.arrow[1] + ''); + arrow = $(dom.spread()); elem.prepend(arrow); that.spread(elem, item); } if(!elem.data('spread')) { that.open(elem, ul, arrow) } - var li = that.getNode(itemAddObj, false); + var li = $(that.getNode(itemAddObj)); that.bindUlEvent(li, itemAddObj); ul.append(li); } @@ -196,14 +220,20 @@ layui.define('jquery', function(exports) { Tree.prototype.delete = function(elem, item) { var that = this, options = that.options; - var deleteBtn = elem.children('.layui-tree-menu').children('.layui-tree-delete') + var node =elem.children('.layui-tree-node'); + var deleteBtn = node.children('.layui-tree-menu').children('.layui-tree-delete') var ul = elem.children('ul'), a = elem.children('a'); var deleteEvent = function(e) { layui.stope(e); var _deleteEvent = { done: function() { - elem.html(''); + var parent =elem.parent(); + var arrow = parent.parent().children('.layui-tree-spread') + if(parent.children('li').length===1){ + arrow.remove(); + } + elem.remove(); } } options.deleteClick(item, elem, _deleteEvent.done) @@ -215,7 +245,8 @@ layui.define('jquery', function(exports) { Tree.prototype.click = function(elem, item) { var that = this, options = that.options; - elem.children('a').on('click', function(e) { + var node =elem.children('.layui-tree-node'); + node.children('a').on('click', function(e) { layui.stope(e); options.click(item) }); @@ -225,16 +256,19 @@ layui.define('jquery', function(exports) { Tree.prototype.checkbox = function(elem, item) { var that = this, options = that.options; - var checkbox = elem.children('.layui-tree-check') + var node =elem.children('.layui-tree-node'); + var checkbox = node.children('.layui-tree-check') var ul = elem.children('ul'), - a = elem.children('a'); + a = node.children('a'); var check = function() { var index = layui.findObj(changeList, item); if(elem.data('check')) { elem.data('check', null) + checkbox.removeClass(' is-checked'); checkbox.html(icon.checkbox[0]); } else { elem.data('check', true); + checkbox.addClass(' is-checked'); checkbox.html(icon.checkbox[1]); } if(index === -1) { @@ -252,9 +286,10 @@ layui.define('jquery', function(exports) { Tree.prototype.spread = function(elem, item) { var that = this, options = that.options; - var arrow = elem.children('.layui-tree-spread') + var node =elem.children('.layui-tree-node'); + var arrow = node.children('.layui-tree-spread') var ul = elem.children('ul'), - a = elem.children('a'); + a = node.children('a'); //如果没有子节点，则不执行 if(!ul[0]) return; arrow.on('click', function() {