|
|
|
|
@ -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 ? '<i class="layui-icon layui-tree-spread">' + ( |
|
|
|
|
item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] |
|
|
|
|
) + '</i>' : ''; |
|
|
|
|
}, |
|
|
|
|
checkbox: function() { |
|
|
|
|
return options.check ? ( |
|
|
|
|
'<i class="layui-icon layui-tree-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-tree-menu">' + |
|
|
|
|
'<span class="layui-tree-add">Add</span>' + |
|
|
|
|
'<span class="layui-tree-delete">Delete</span>' + |
|
|
|
|
'</div>' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//如果被选中加入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 = ['<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-tree-node">' |
|
|
|
|
//展开箭头
|
|
|
|
|
, |
|
|
|
|
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() |
|
|
|
|
, |
|
|
|
|
'</div></li>' |
|
|
|
|
].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 ? '<i class="layui-icon layui-tree-spread">' + ( |
|
|
|
|
item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0] |
|
|
|
|
) + '</i>' : ''; |
|
|
|
|
}, |
|
|
|
|
checkbox: function() { |
|
|
|
|
return options.check ? ( |
|
|
|
|
'<i class="layui-icon layui-tree-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-tree-menu">' + |
|
|
|
|
'<span class="layui-tree-add">' + that.addBtnLabelKey + '</span>' + |
|
|
|
|
'<span class="layui-tree-delete">' + that.deleteBtnLabelKey + '</span>' + |
|
|
|
|
'</div>' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//父绑定事件
|
|
|
|
|
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 = ['<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-tree-node">' |
|
|
|
|
//展开箭头
|
|
|
|
|
, |
|
|
|
|
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(), |
|
|
|
|
'</div></li>' |
|
|
|
|
].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 = $('<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(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
//伸展节点
|
|
|
|
|
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 = $('<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(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//拖拽节点
|
|
|
|
|
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); |
|
|
|
|
}); |
|
|
|
|
}); |
smallwei
6 years ago