commit
						5e30e00cfa
					
				
							
								
								
									
										24
									
								
								doc/atree.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								doc/atree.md
									
									
									
									
									
										Normal file
									
								
							| @ -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节点的方法 | ||||
|   | ||||
							
								
								
									
										151
									
								
								examples/atree.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										151
									
								
								examples/atree.html
									
									
									
									
									
										Normal file
									
								
							| @ -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> | ||||
| @ -912,6 +912,27 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh | ||||
| .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;} | ||||
| 
 | ||||
| /** atree **/ | ||||
| .layui-atree{line-height: 26px;} | ||||
| .layui-atree li{position:relative;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;} | ||||
| .layui-atree li a,  | ||||
| .layui-atree li .layui-atree-spread{display: inline-block; vertical-align: top;font-size: 12px; height: 26px; *display: inline; *zoom:1; cursor: pointer;color: #c0c4cc} | ||||
| .layui-atree li a{font-size: 0;} | ||||
| .layui-atree li a i{font-size: 16px;} | ||||
| .layui-atree li a cite{padding: 0 6px; font-size: 14px; font-style: normal;color: #606266;} | ||||
| .layui-atree li i{padding-left: 6px; -moz-user-select: none;} | ||||
| .layui-atree li .layui-atree-check{font-size: 16px;color: #dcdfe6} | ||||
| .layui-atree li .layui-atree-check:hover{color: #409eff;} | ||||
| .layui-atree li .layui-atree-check.is-checked{color: #409eff;} | ||||
| .layui-atree li ul{ display:none;margin-left: 40px;} | ||||
| .layui-atree li .layui-atree-enter{line-height: 24px; border: 1px dotted #000;} | ||||
| .layui-atree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap} | ||||
| .layui-atree-drag i{padding-right: 5px;} | ||||
| .layui-atree-node{position: relative;} | ||||
| .layui-atree-node:hover { background-color:#eee;} | ||||
| .layui-atree-menu{position: absolute;top:0;right: 0;z-index:1024;} | ||||
| .layui-atree-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;} | ||||
|  | ||||
										
											Binary file not shown.
										
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 272 KiB | 
										
											Binary file not shown.
										
									
								
							
										
											Binary file not shown.
										
									
								
							
							
								
								
									
										420
									
								
								src/lay/modules/atree.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										420
									
								
								src/lay/modules/atree.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,420 @@ | ||||
| /** | ||||
| 
 | ||||
|  @Name:layui.atree2.0 树组件 | ||||
|  @Author:smallwei | ||||
|  @License:MIT | ||||
|      | ||||
|  */ | ||||
| 
 | ||||
| layui.define('jquery', function(exports) { | ||||
|   "use strict"; | ||||
| 
 | ||||
|   var $ = layui.$, | ||||
|     hint = layui.hint(); | ||||
|   //勾选集合
 | ||||
|   var changeList = []; | ||||
|   //变量别名
 | ||||
|   var props = { | ||||
|     name: 'name', | ||||
|     id: 'id', | ||||
|     children: 'children', | ||||
|     checkbox: 'checkbox', | ||||
|     spread: 'spread', | ||||
|     deleteBtnLabelKey: 'delete', | ||||
|     addBtnLabelKey: 'add', | ||||
|   }; | ||||
| 
 | ||||
|   var enterSkin = 'layui-atree-enter', | ||||
|     Atree = 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: '' //叶节点
 | ||||
|   }; | ||||
| 
 | ||||
|   //初始化
 | ||||
|   Atree.prototype.init = function(elem) { | ||||
|     var that = this; | ||||
|     elem.addClass('layui-box layui-atree'); //添加tree样式
 | ||||
|     if(that.options.skin) { | ||||
|       elem.addClass('layui-atree-skin-' + that.options.skin); | ||||
|     } | ||||
|     that.tree(elem); | ||||
|     that.on(elem); | ||||
|   }; | ||||
| 
 | ||||
|   //树节点解析
 | ||||
|   Atree.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); | ||||
| 
 | ||||
|     }); | ||||
|   }; | ||||
| 
 | ||||
|   //节点dom拼接
 | ||||
|   Atree.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 ? '<i class="layui-icon layui-atree-spread">' + ( | ||||
|           item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] | ||||
|         ) + '</i>' : ''; | ||||
|       }, | ||||
|       checkbox: function() { | ||||
|         return options.check ? ( | ||||
|           '<i class="layui-icon layui-atree-check' + (item[that.checkboxKey] ? ' is-checked' : '') + '">' + ( | ||||
|             item[that.checkboxKey] ? icon.checkbox[1] : icon.checkbox[0] | ||||
|           ) + '</i>' | ||||
|         ) : ''; | ||||
|       }, | ||||
|       ul: function() { | ||||
|         return '<ul class="' + (item[that.spreadKey] || options.spreadAll ? "layui-show" : "") + '"></ul>' | ||||
|       }, | ||||
|       node: function() { | ||||
|         return '<a href="' + (item.href || 'javascript:;') + '" ' + ( | ||||
|             options.target && item.href ? 'target=\"' + options.target + '\"' : '' | ||||
|           ) + '>' + | ||||
|           ('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>') | ||||
|       }, | ||||
|       menu: function() { | ||||
|         return '<div class="layui-atree-menu">' + | ||||
|           '<span class="layui-atree-add">' + that.addBtnLabelKey + '</span>' + | ||||
|           '<span class="layui-atree-delete">' + that.deleteBtnLabelKey + '</span>' + | ||||
|           '</div>' | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
|   //获取树节点
 | ||||
|   Atree.prototype.getNode = function(item) { | ||||
|     var that = this, | ||||
|       options = that.options | ||||
|     var dom = that.getDom(item); | ||||
|     var li = ['<li ' + | ||||
|       (item[that.spreadKey] || options.spreadAll ? 'data-spread="' + (item[that.spreadKey] || true) + '"' : '') + | ||||
|       (item[that.checkboxKey] ? 'data-check="' + item[that.checkboxKey] + '"' : '') + | ||||
|       ('data-id=' + item[that.idKey]) + | ||||
|       '><div class="layui-atree-node">' | ||||
|       //展开箭头
 | ||||
|       , | ||||
|       dom.spread() | ||||
| 
 | ||||
|       //复选框
 | ||||
|       , | ||||
|       dom.checkbox() | ||||
| 
 | ||||
|       //节点
 | ||||
|       , | ||||
|       dom.node() | ||||
|       //菜单
 | ||||
|       , | ||||
|       dom.menu(), | ||||
|       '</div></li>' | ||||
|     ].join(''); | ||||
|     return li; | ||||
|   } | ||||
| 
 | ||||
|   //父绑定事件
 | ||||
|   Atree.prototype.bindUlEvent = function(li, item) { | ||||
|     var that = this, | ||||
|       options = that.options | ||||
|     //触发点击节点回调
 | ||||
|     typeof options.click === 'function' && that.click(li, item); | ||||
| 
 | ||||
|     //节点选择
 | ||||
|     typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item); | ||||
| 
 | ||||
|     //新增方法
 | ||||
|     typeof options.addClick === 'function' && that.add(li, item); | ||||
| 
 | ||||
|     //删除方法
 | ||||
|     typeof options.deleteClick === 'function' && that.delete(li, item); | ||||
| 
 | ||||
|     //拖拽节点
 | ||||
|     options.drag && that.drag(li, item); | ||||
|   } | ||||
| 
 | ||||
|   //选中回调函数
 | ||||
|   Atree.prototype.change = function() { | ||||
|       var that = this, | ||||
|         options = that.options; | ||||
|       options.change(changeList); | ||||
|     }, | ||||
| 
 | ||||
|     //新增方法回调
 | ||||
|     Atree.prototype.add = function(elem, item) { | ||||
|       var that = this, | ||||
|         options = that.options; | ||||
|       var node = elem.children('.layui-atree-node'); | ||||
|       var addBtn = node.children('.layui-atree-menu').children('.layui-atree-add') | ||||
|       var arrow = node.children('.layui-atree-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); | ||||
|     } | ||||
| 
 | ||||
|   //删除方法回调
 | ||||
|   Atree.prototype.delete = function(elem, item) { | ||||
|     var that = this, | ||||
|       options = that.options; | ||||
|     var node = elem.children('.layui-atree-node'); | ||||
|     var deleteBtn = node.children('.layui-atree-menu').children('.layui-atree-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-atree-spread') | ||||
|           if(parent.children('li').length === 1) { | ||||
|             arrow.remove(); | ||||
|           } | ||||
|           elem.remove(); | ||||
|         } | ||||
|       } | ||||
|       options.deleteClick(item, elem, _deleteEvent.done) | ||||
|     } | ||||
|     deleteBtn.on('click', deleteEvent); | ||||
|   } | ||||
| 
 | ||||
|   //点击节点回调
 | ||||
|   Atree.prototype.click = function(elem, item) { | ||||
|     var that = this, | ||||
|       options = that.options; | ||||
|     var node = elem.children('.layui-atree-node'); | ||||
|     node.children('a').on('click', function(e) { | ||||
|       layui.stope(e); | ||||
|       options.click(item) | ||||
|     }); | ||||
|   }; | ||||
| 
 | ||||
|   //节点选择
 | ||||
|   Atree.prototype.checkbox = function(elem, item) { | ||||
|     var that = this, | ||||
|       options = that.options; | ||||
|     var node = elem.children('.layui-atree-node'); | ||||
|     var checkbox = node.children('.layui-atree-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-atree-node').find('.layui-atree-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); | ||||
| 
 | ||||
|   }; | ||||
| 
 | ||||
|   //伸展节点
 | ||||
|   Atree.prototype.spread = function(elem, item) { | ||||
|     var that = this, | ||||
|       options = that.options; | ||||
|     var node = elem.children('.layui-atree-node'); | ||||
|     var arrow = node.children('.layui-atree-spread') | ||||
|     var ul = elem.children('ul'), | ||||
|       a = node.children('a'); | ||||
|     //如果没有子节点,则不执行
 | ||||
|     if(!ul[0]) return; | ||||
|     arrow.on('click', function() { | ||||
|       that.open(elem, ul, arrow) | ||||
|     }); | ||||
|   } | ||||
| 
 | ||||
|   //打开节点
 | ||||
|   Atree.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]); | ||||
|     } | ||||
|   }; | ||||
|   //通用事件
 | ||||
|   Atree.prototype.on = function(elem) { | ||||
|     var that = this, | ||||
|       options = that.options; | ||||
|     var dragStr = 'layui-atree-drag'; | ||||
| 
 | ||||
|     //屏蔽选中文字
 | ||||
|     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 = $('<div class="layui-box ' + dragStr + '"></div>'); | ||||
|           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(); | ||||
|         } | ||||
|       }); | ||||
|     } | ||||
|   }; | ||||
| 
 | ||||
|   //拖拽节点
 | ||||
|   Atree.prototype.move = {}; | ||||
|   Atree.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 atree = new Atree(options = options || {}); | ||||
|     var elem = $(options.elem); | ||||
|     if(!elem[0]) { | ||||
|       return hint.error('layui.atree 没有找到' + options.elem + '元素'); | ||||
|     } | ||||
|     atree.init(elem); | ||||
|   }); | ||||
| }); | ||||
							
								
								
									
										14
									
								
								src/layui.js
									
									
									
									
									
								
							
							
						
						
									
										14
									
								
								src/layui.js
									
									
									
									
									
								
							| @ -56,6 +56,7 @@ | ||||
|     ,layedit: 'modules/layedit' //富文本编辑器
 | ||||
|     ,form: 'modules/form' //表单集
 | ||||
|     ,upload: 'modules/upload' //上传
 | ||||
|     ,atree: 'modules/atree' //新树结构
 | ||||
|     ,tree: 'modules/tree' //树结构
 | ||||
|     ,table: 'modules/table' //表格
 | ||||
|     ,element: 'modules/element' //常用元素操作
 | ||||
| @ -430,7 +431,20 @@ | ||||
|       error: error | ||||
|     } | ||||
|   }; | ||||
|    //判断对象是否相等
 | ||||
|     Layui.prototype.isEqualObj = function(obj1,obj2){ | ||||
|     		return JSON.stringify(obj1)===JSON.stringify(obj2) | ||||
|     } | ||||
| 
 | ||||
| 	 //寻找对象是否存在数组中
 | ||||
|     Layui.prototype.findObj = function(list,value,key) { | ||||
|     		 var that = this, | ||||
|     		 result = -1; | ||||
|     		 that.each(list, function(index, item) { | ||||
|     		 	if(item[key] == value)result = index; | ||||
|     		 }) | ||||
|     		 return result; | ||||
|     	} | ||||
|   //遍历
 | ||||
|   Layui.prototype.each = function(obj, fn){ | ||||
|     var key | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user