From ea24b7635db3822fa586cae819e5369f8209dae9 Mon Sep 17 00:00:00 2001 From: smallwei <1634566606@qq.com> Date: Thu, 19 Jul 2018 20:53:05 +0800 Subject: [PATCH] fix(atree): 2.0.0-beta --- examples/atree.html | 2 + src/lay/modules/atree.js | 745 ++++++++++++++++++++------------------- src/layui.js | 4 +- 3 files changed, 389 insertions(+), 362 deletions(-) diff --git a/examples/atree.html b/examples/atree.html index 5b2eed6..817c46c 100644 --- a/examples/atree.html +++ b/examples/atree.html @@ -33,6 +33,8 @@ // drag: true, spreadAll:true, props:{ + addBtnLabel:'新增', + deleteBtnLabel:'删除', name: 'name', id: 'id', children:'children', diff --git a/src/lay/modules/atree.js b/src/lay/modules/atree.js index 4c80a19..a9ef3b4 100644 --- a/src/lay/modules/atree.js +++ b/src/lay/modules/atree.js @@ -7,389 +7,414 @@ */ layui.define('jquery', function(exports) { - "use strict"; + "use strict"; - var $ = layui.$, - hint = layui.hint(); - //勾选集合 - var changeList = []; - //变量别名 - var props ={ - name: 'name', - id: 'id', - 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 = { - arrow: ['', ''] //箭头 - , - checkbox: ['', ''] //复选框 - , - leaf: '' //叶节点 - }; + var $ = layui.$, + hint = layui.hint(); + //勾选集合 + var changeList = []; + //变量别名 + var props = { + name: 'name', + id: 'id', + children: 'children', + checkbox: 'checkbox', + spread: 'spread', + deleteBtnLabelKey: 'delete', + addBtnLabelKey: 'add', + }; - //初始化 - Tree.prototype.init = function(elem) { - var that = this; - elem.addClass('layui-box layui-tree'); //添加tree样式 - if(that.options.skin) { - elem.addClass('layui-tree-skin-' + that.options.skin); - } - that.tree(elem); - that.on(elem); - }; + 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; + this.addBtnLabelKey = this.props.addBtnLabel || props.addBtnLabel; + this.deleteBtnLabelKey = this.props.deleteBtnLabel || props.deleteBtnLabel; + }; + //图标 + var icon = { + arrow: ['', ''] //箭头 + , + checkbox: ['', ''] //复选框 + , + leaf: '' //叶节点 + }; - //树节点解析 - Tree.prototype.tree = function(elem, children) { - 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 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); - that.tree(ul, item[that.childrenKey]); - } - //伸展节点 - that.spread(li, item); - that.bindUlEvent(li, item); - elem.append(li); + //初始化 + Tree.prototype.init = function(elem) { + var that = this; + elem.addClass('layui-box layui-tree'); //添加tree样式 + if(that.options.skin) { + elem.addClass('layui-tree-skin-' + that.options.skin); + } + that.tree(elem); + that.on(elem); + }; - }); - }; + //树节点解析 + Tree.prototype.tree = function(elem, children) { + 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 dom = that.getDom(item); + var ul = $(dom.ul(item)); + var li = $(that.getNode(item)); -//节点dom拼接 - Tree.prototype.getDom = function(item) { - var that = this, - options = that.options, - item = item, - hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; - return { - spread: function() { - return hasChild ? '' + ( - item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] - ) + '' : ''; - }, - checkbox: function() { - return options.check ? ( - '' + ( - item[that.checkboxKey]? icon.checkbox[1] : icon.checkbox[0] - ) + '' - ) : ''; - }, - ul:function(){ - return '' - }, - node: function() { - return '' + - ('' + (item[that.nameKey] || '未命名') + '') - }, - menu: function() { - return '
' + - 'Add' + - 'Delete' + - '
' - } - } + //如果被选中加入checkbox集合里 + if(item[that.checkboxKey]) { + changeList.push(item); + } - } - //获取树节点 - Tree.prototype.getNode = function(item) { - var that = this, - options = that.options - var dom = that.getDom(item); - var li = ['
  • ' - //展开箭头 - , - dom.spread() + //如果有子节点，则递归继续生成树 + if(hasChild) { + li.append(ul); + that.tree(ul, item[that.childrenKey]); + } + //伸展节点 + that.spread(li, item); + that.bindUlEvent(li, item); + elem.append(li); - //复选框 - , - dom.checkbox() + }); + }; - //节点 - , - dom.node() - //菜单 - , - dom.menu() - , - '
    • ' - ].join(''); - return li; - } + //节点dom拼接 + Tree.prototype.getDom = function(item) { + var that = this, + options = that.options, + item = item, + hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; + return { + spread: function() { + return hasChild ? '' + ( + item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] + ) + '' : ''; + }, + checkbox: function() { + return options.check ? ( + '' + ( + item[that.checkboxKey] ? icon.checkbox[1] : icon.checkbox[0] + ) + '' + ) : ''; + }, + ul: function() { + return '' + }, + node: function() { + return '' + + ('' + (item[that.nameKey] || '未命名') + '') + }, + menu: function() { + return '
    ' + + '' + that.addBtnLabelKey + '' + + '' + that.deleteBtnLabelKey + '' + + '
    ' + } + } - //父绑定事件 - Tree.prototype.bindUlEvent = function(li, item) { - var that = this, - options = that.options - //触发点击节点回调 - typeof options.click === 'function' && that.click(li, item); + } + //获取树节点 + Tree.prototype.getNode = function(item) { + var that = this, + options = that.options + var dom = that.getDom(item); + var li = ['
  • ' + //展开箭头 + , + dom.spread() - //节点选择 - typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item); + //复选框 + , + dom.checkbox() - //新增方法 - typeof options.addClick === 'function' && that.add(li, item); + //节点 + , + dom.node() + //菜单 + , + dom.menu(), + '
    • ' + ].join(''); + return li; + } - //删除方法 - typeof options.deleteClick === 'function' && that.delete(li, item); + //父绑定事件 + Tree.prototype.bindUlEvent = function(li, item) { + var that = this, + options = that.options + //触发点击节点回调 + typeof options.click === 'function' && that.click(li, item); - //拖拽节点 - options.drag && that.drag(li, item); - } + //节点选择 + typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item); - //选中回调函数 - Tree.prototype.change = function() { - var that = this, - options = that.options; - options.change(changeList); - }, + //新增方法 + typeof options.addClick === 'function' && that.add(li, item); - //新增方法回调 - Tree.prototype.add = function(elem, item) { - var that = this, - options = that.options; - 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 = 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 = $(dom.ul()) - elem.append(ul); - } - if(!arrow[0]) { - arrow = $(dom.spread()); - elem.prepend(arrow); - that.spread(elem, item); - } - if(!elem.data('spread')) { - that.open(elem, ul, arrow) - } - var li = $(that.getNode(itemAddObj)); - that.bindUlEvent(li, itemAddObj); - ul.append(li); - } - } - options.addClick(item, elem, _addEvent.add) - } - addBtn.on('click', addEvent); - } + //删除方法 + typeof options.deleteClick === 'function' && that.delete(li, item); - //删除方法回调 - Tree.prototype.delete = function(elem, item) { - var that = this, - options = that.options; - 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() { - 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) - } - deleteBtn.on('click', deleteEvent); - } + //拖拽节点 + options.drag && that.drag(li, item); + } - //点击节点回调 - Tree.prototype.click = function(elem, item) { - var that = this, - options = that.options; - var node =elem.children('.layui-tree-node'); - node.children('a').on('click', function(e) { - layui.stope(e); - options.click(item) - }); - }; + //选中回调函数 + Tree.prototype.change = function() { + var that = this, + options = that.options; + options.change(changeList); + }, - //节点选择 - Tree.prototype.checkbox = function(elem, item) { - var that = this, - options = that.options; - var node =elem.children('.layui-tree-node'); - var checkbox = node.children('.layui-tree-check') - var ul = elem.children('ul'), - 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) { - changeList.push(item); - } else { - changeList.splice(index, 1); - } - that.change(); - } - checkbox.on('click', check); + //新增方法回调 + Tree.prototype.add = function(elem, item) { + var that = this, + options = that.options; + 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 = 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 = $(dom.ul()) + elem.append(ul); + } + if(!arrow[0]) { + arrow = $(dom.spread()); + node.prepend(arrow); + that.spread(elem, item); + } + if(!elem.data('spread')) { + that.open(elem, ul, arrow) + } + var li = $(that.getNode(itemAddObj)); + that.bindUlEvent(li, itemAddObj); + ul.append(li); + } + } + options.addClick(item, elem, _addEvent.add) + } + addBtn.on('click', addEvent); + } - }; + //删除方法回调 + Tree.prototype.delete = function(elem, item) { + var that = this, + options = that.options; + 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() { + 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) + } + deleteBtn.on('click', deleteEvent); + } - //伸展节点 - Tree.prototype.spread = function(elem, item) { - var that = this, - options = that.options; - var node =elem.children('.layui-tree-node'); - var arrow = node.children('.layui-tree-spread') - var ul = elem.children('ul'), - a = node.children('a'); - //如果没有子节点，则不执行 - if(!ul[0]) return; - arrow.on('click', function() { - that.open(elem, ul, arrow) - }); - } + //点击节点回调 + Tree.prototype.click = function(elem, item) { + var that = this, + options = that.options; + var node = elem.children('.layui-tree-node'); + node.children('a').on('click', function(e) { + layui.stope(e); + options.click(item) + }); + }; - //打开节点 - Tree.prototype.open = function(elem, ul, arrow) { - if(elem.data('spread')) { - elem.data('spread', null) - ul.removeClass('layui-show'); - arrow.html(icon.arrow[0]); - } else { - elem.data('spread', true); - ul.addClass('layui-show'); - arrow.html(icon.arrow[1]); - } - }; - //通用事件 - Tree.prototype.on = function(elem) { - var that = this, - options = that.options; - var dragStr = 'layui-tree-drag'; + //节点选择 + Tree.prototype.checkbox = function(elem, item) { + var that = this, + options = that.options; + var node = elem.children('.layui-tree-node'); + var checkbox = node.children('.layui-tree-check') + var ul = elem.children('ul'), + a = node.children('a'); + var whileAllCheck = function(dom, item, type) { + var list = dom.children('.layui-show').find('li'); + var children = item ? item.children || [] : []; + for(var i = 0; i < list.length; i++) { + var li = $(list[i]); + setCheck(li, children[i], type); + whileAllCheck(li, children[i], type); + } + } + var setCheck = function(elem, item, type) { + var checkbox = elem.children('.layui-tree-node').find('.layui-tree-check'); + if(type) { + elem.data('check', true) + checkbox.html(icon.checkbox[1]) + checkbox.addClass(' is-checked'); + } else { + elem.data('check', null); + checkbox.removeClass(' is-checked'); + checkbox.html(icon.checkbox[0]) + } + if(item) { + var index = layui.findObj(changeList, item[that.idKey], that.idKey); + if(index === -1 && type === true) { + changeList.push(item); + } else if(type === false) { + changeList.splice(index, 1); + } + } + } + var check = function() { + var checkFlag; + if(elem.data('check')) { + checkFlag = false; + } else { + checkFlag = true; + } + setCheck(elem, item, checkFlag) + whileAllCheck(elem, item, checkFlag); + that.change(); + } + checkbox.on('click', check); - //屏蔽选中文字 - elem.find('i').on('selectstart', function(e) { - return false - }); + }; - //拖拽 - if(options.drag) { - $(document).on('mousemove', function(e) { - var move = that.move; - if(move.from) { - var to = move.to, - treeMove = $('
    '); - e.preventDefault(); - $('.' + dragStr)[0] || $('body').append(treeMove); - var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove; - (dragElem).addClass('layui-show').html(move.from.elem.children('a').html()); - dragElem.css({ - left: e.pageX + 10, - top: e.pageY + 10 - }) - } - }).on('mouseup', function() { - var move = that.move; - if(move.from) { - move.from.elem.children('a').removeClass(enterSkin); - move.to && move.to.elem.children('a').removeClass(enterSkin); - that.move = {}; - $('.' + dragStr).remove(); - } - }); - } - }; + //伸展节点 + Tree.prototype.spread = function(elem, item) { + var that = this, + options = that.options; + var node = elem.children('.layui-tree-node'); + var arrow = node.children('.layui-tree-spread') + var ul = elem.children('ul'), + a = node.children('a'); + //如果没有子节点，则不执行 + if(!ul[0]) return; + arrow.on('click', function() { + that.open(elem, ul, arrow) + }); + } - //拖拽节点 - Tree.prototype.move = {}; - Tree.prototype.drag = function(elem, item) { - var that = this, - options = that.options; - var a = elem.children('a'), - mouseenter = function() { - var othis = $(this), - move = that.move; - if(move.from) { - move.to = { - item: item, - elem: elem - }; - othis.addClass(enterSkin); - } - }; - a.on('mousedown', function() { - var move = that.move - move.from = { - item: item, - elem: elem - }; - }); - a.on('mouseenter', mouseenter).on('mousemove', mouseenter) - .on('mouseleave', function() { - var othis = $(this), - move = that.move; - if(move.from) { - delete move.to; - othis.removeClass(enterSkin); - } - }); - }; + //打开节点 + Tree.prototype.open = function(elem, ul, arrow) { + if(elem.data('spread')) { + elem.data('spread', null) + ul.removeClass('layui-show'); + arrow.html(icon.arrow[0]); + } else { + elem.data('spread', true); + ul.addClass('layui-show'); + arrow.html(icon.arrow[1]); + } + }; + //通用事件 + Tree.prototype.on = function(elem) { + var that = this, + options = that.options; + var dragStr = 'layui-tree-drag'; - //暴露接口 - exports('atree', function(options) { - var tree = new Tree(options = options || {}); - var elem = $(options.elem); - if(!elem[0]) { - return hint.error('layui.tree 没有找到' + options.elem + '元素'); - } - tree.init(elem); - }); + //屏蔽选中文字 + elem.find('i').on('selectstart', function(e) { + return false + }); + + //拖拽 + if(options.drag) { + $(document).on('mousemove', function(e) { + var move = that.move; + if(move.from) { + var to = move.to, + treeMove = $('
    '); + e.preventDefault(); + $('.' + dragStr)[0] || $('body').append(treeMove); + var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove; + (dragElem).addClass('layui-show').html(move.from.elem.children('a').html()); + dragElem.css({ + left: e.pageX + 10, + top: e.pageY + 10 + }) + } + }).on('mouseup', function() { + var move = that.move; + if(move.from) { + move.from.elem.children('a').removeClass(enterSkin); + move.to && move.to.elem.children('a').removeClass(enterSkin); + that.move = {}; + $('.' + dragStr).remove(); + } + }); + } + }; + + //拖拽节点 + Tree.prototype.move = {}; + Tree.prototype.drag = function(elem, item) { + var that = this, + options = that.options; + var a = elem.children('a'), + mouseenter = function() { + var othis = $(this), + move = that.move; + if(move.from) { + move.to = { + item: item, + elem: elem + }; + othis.addClass(enterSkin); + } + }; + a.on('mousedown', function() { + var move = that.move + move.from = { + item: item, + elem: elem + }; + }); + a.on('mouseenter', mouseenter).on('mousemove', mouseenter) + .on('mouseleave', function() { + var othis = $(this), + move = that.move; + if(move.from) { + delete move.to; + othis.removeClass(enterSkin); + } + }); + }; + + //暴露接口 + exports('atree', function(options) { + var tree = new Tree(options = options || {}); + var elem = $(options.elem); + if(!elem[0]) { + return hint.error('layui.tree 没有找到' + options.elem + '元素'); + } + tree.init(elem); + }); }); \ No newline at end of file diff --git a/src/layui.js b/src/layui.js index aa1aa1d..90e0d18 100644 --- a/src/layui.js +++ b/src/layui.js @@ -437,11 +437,11 @@ } //寻找对象是否存在数组中 - Layui.prototype.findObj = function(list,obj) { + Layui.prototype.findObj = function(list,value,key) { var that = this, result = -1; that.each(list, function(index, item) { - if(that.isEqualObj(obj,item))result = index; + if(item[key] == value)result = index; }) return result; }