feat(atree): 新增atree模块
This commit is contained in:
parent
8dae2c5feb
commit
1b541568a0
144
examples/atree.html
Normal file
144
examples/atree.html
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<!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,
|
||||||
|
props:{
|
||||||
|
name: 'name',
|
||||||
|
id: 'id',
|
||||||
|
children:'children'
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
children: [{
|
||||||
|
name: '所有未读',
|
||||||
|
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>
|
@ -1,182 +1,147 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>树模块 - layui</title>
|
<title>树模块 - layui</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../src/css/layui.css">
|
<link rel="stylesheet" href="../src/css/layui.css">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body{padding: 50px 100px;}
|
||||||
padding: 50px 100px;
|
</style>
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<ul id="demo"></ul>
|
<ul id="demo"></ul>
|
||||||
|
|
||||||
<ul id="demo1" style="margin-top: 50px;"></ul>
|
<ul id="demo1" style="margin-top: 50px;"></ul>
|
||||||
|
|
||||||
<script src="../src/layui.js"></script>
|
<script src="../src/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use('tree', function() {
|
|
||||||
var tree = layui.tree({
|
layui.use('tree', function(){
|
||||||
elem: '#demo' //指定元素
|
var tree = layui.tree({
|
||||||
,
|
elem: '#demo' //指定元素
|
||||||
check: 'checkbox' //勾选风格
|
//,check: 'checkbox' //勾选风格
|
||||||
,
|
,skin: 'as' //设定皮肤
|
||||||
skin: 'as' //设定皮肤
|
//,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
|
||||||
//,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
|
,drag: true
|
||||||
,
|
,click: function(item){ //点击节点回调
|
||||||
drag: true,
|
console.log(item)
|
||||||
props:{
|
}
|
||||||
name: 'name',
|
,nodes: [ //节点
|
||||||
id: 'id',
|
{
|
||||||
children:'children'
|
name: '常用文件夹'
|
||||||
},
|
,id: 1
|
||||||
change:function(val){
|
,alias: 'changyong'
|
||||||
console.group('change event')
|
,children: [
|
||||||
console.log('Array')
|
{
|
||||||
console.log(val);
|
name: '所有未读'
|
||||||
console.groupEnd()
|
,id: 11
|
||||||
},
|
//,href: 'http://www.layui.com/'
|
||||||
click: function(item) { //点击节点回调
|
,alias: 'weidu'
|
||||||
console.group('click event')
|
}, {
|
||||||
console.log('Object')
|
name: '置顶邮件'
|
||||||
console.log(item);
|
,id: 12
|
||||||
console.groupEnd()
|
}, {
|
||||||
},
|
name: '标签邮件'
|
||||||
addClick:function(item,elem,add){
|
,id: 13
|
||||||
console.group('append event')
|
}
|
||||||
console.log('Object')
|
]
|
||||||
console.log(item);
|
}, {
|
||||||
console.log('dom')
|
name: '我的邮箱'
|
||||||
console.log(elem);
|
,id: 2
|
||||||
console.log('dom add event')
|
,spread: true
|
||||||
var item ={
|
,children: [
|
||||||
name: '测试节点'+new Date().getTime(),
|
{
|
||||||
id:-1
|
name: 'QQ邮箱'
|
||||||
}
|
,id: 21
|
||||||
add(item)
|
,spread: true
|
||||||
console.groupEnd()
|
,children: [
|
||||||
},
|
{
|
||||||
deleteClick:function(item,elem,done){
|
name: '收件箱'
|
||||||
console.group('delete event')
|
,id: 211
|
||||||
console.log('Object')
|
,children: [
|
||||||
console.log(item);
|
{
|
||||||
console.log('dom')
|
name: '所有未读'
|
||||||
console.log(elem);
|
,id: 2111
|
||||||
console.log('dom delete event')
|
}, {
|
||||||
done();
|
name: '置顶邮件'
|
||||||
console.groupEnd()
|
,id: 2112
|
||||||
},
|
}, {
|
||||||
nodes: [ //节点
|
name: '标签邮件'
|
||||||
{
|
,id: 2113
|
||||||
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,
|
|
||||||
children: [{
|
|
||||||
name: '所有未读',
|
|
||||||
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
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
});
|
}, {
|
||||||
|
name: '已发出的邮件'
|
||||||
//生成一个模拟树
|
,id: 212
|
||||||
var createTree = function(node, start) {
|
}, {
|
||||||
node = node || function() {
|
name: '垃圾邮件'
|
||||||
var arr = [];
|
,id: 213
|
||||||
for (var i = 1; i < 10; i++) {
|
}
|
||||||
arr.push({
|
]
|
||||||
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
}, {
|
||||||
});
|
name: '阿里云邮'
|
||||||
}
|
,id: 22
|
||||||
return arr;
|
,children: [
|
||||||
}();
|
{
|
||||||
start = start || 1;
|
name: '收件箱'
|
||||||
layui.each(node, function(index, item) {
|
,id: 221
|
||||||
if (start < 10 && index < 9) {
|
}, {
|
||||||
var child = [{
|
name: '已发出的邮件'
|
||||||
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
,id: 222
|
||||||
}];
|
}, {
|
||||||
node[index].children = child;
|
name: '垃圾邮件'
|
||||||
createTree(child, index + start + 1);
|
,id: 223
|
||||||
}
|
}
|
||||||
});
|
]
|
||||||
return node;
|
}
|
||||||
};
|
]
|
||||||
|
}
|
||||||
layui.tree({
|
]
|
||||||
elem: '#demo1' //指定元素
|
});
|
||||||
,
|
|
||||||
nodes: createTree()
|
//生成一个模拟树
|
||||||
});
|
var createTree = function(node, start){
|
||||||
|
node = node || function(){
|
||||||
|
var arr = [];
|
||||||
|
for(var i = 1; i < 10; i++){
|
||||||
|
arr.push({
|
||||||
|
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||||
});
|
});
|
||||||
</script>
|
}
|
||||||
|
return arr;
|
||||||
|
}();
|
||||||
|
start = start || 1;
|
||||||
|
layui.each(node, function(index, item){
|
||||||
|
if(start < 10 && index < 9){
|
||||||
|
var child = [
|
||||||
|
{
|
||||||
|
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
node[index].children = child;
|
||||||
|
createTree(child, index + start + 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return node;
|
||||||
|
};
|
||||||
|
|
||||||
<!--<pre class="layui-code">
|
layui.tree({
|
||||||
# layui.tree-v2 备忘
|
elem: '#demo1' //指定元素
|
||||||
* check参数 - checkbox、radio的支持
|
,nodes: createTree()
|
||||||
* 拖拽的支持
|
});
|
||||||
</pre>-->
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<pre class="layui-code">
|
||||||
|
# layui.tree-v2 备忘
|
||||||
|
* check参数 - checkbox、radio的支持
|
||||||
|
* 拖拽的支持
|
||||||
|
</pre>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
</html>
|
|
||||||
|
360
src/lay/modules/atree.js
Normal file
360
src/lay/modules/atree.js
Normal file
@ -0,0 +1,360 @@
|
|||||||
|
/**
|
||||||
|
|
||||||
|
@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'
|
||||||
|
};
|
||||||
|
|
||||||
|
var enterSkin = 'layui-tree-enter',
|
||||||
|
Tree = function(options) {
|
||||||
|
this.options = options;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
//图标
|
||||||
|
var icon = {
|
||||||
|
arrow: ['', ''] //箭头
|
||||||
|
,
|
||||||
|
checkbox: ['', ''] //复选框
|
||||||
|
,
|
||||||
|
leaf: '' //叶节点
|
||||||
|
};
|
||||||
|
|
||||||
|
//初始化
|
||||||
|
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 ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>');
|
||||||
|
var li = that.getNode(item, hasChild);
|
||||||
|
//如果有子节点,则递归继续生成树
|
||||||
|
if(hasChild) {
|
||||||
|
li.append(ul);
|
||||||
|
that.tree(ul, item[that.childrenKey]);
|
||||||
|
}
|
||||||
|
//伸展节点
|
||||||
|
that.spread(li, item);
|
||||||
|
that.bindUlEvent(li, item);
|
||||||
|
elem.append(li);
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//节点dom拼接
|
||||||
|
Tree.prototype.getDom = function() {
|
||||||
|
var that = this,
|
||||||
|
options = that.options
|
||||||
|
return {
|
||||||
|
spread: function(item, hasChild) {
|
||||||
|
return hasChild ? '<i class="layui-icon layui-tree-spread">' + (
|
||||||
|
item.spread ? icon.arrow[1] : icon.arrow[0]
|
||||||
|
) + '</i>' : '';
|
||||||
|
},
|
||||||
|
checkbox: function(item) {
|
||||||
|
return options.check ? (
|
||||||
|
'<i class="layui-icon layui-tree-check">' + (
|
||||||
|
options.check === 'checkbox' ? icon.checkbox[0] : (
|
||||||
|
options.check === 'radio' ? icon.radio[0] : ''
|
||||||
|
)
|
||||||
|
) + '</i>'
|
||||||
|
) : '';
|
||||||
|
},
|
||||||
|
node: function(item) {
|
||||||
|
return '<a href="' + (item.href || 'javascript:;') + '" ' + (
|
||||||
|
options.target && item.href ? 'target=\"' + options.target + '\"' : ''
|
||||||
|
) + '>' +
|
||||||
|
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
|
||||||
|
},
|
||||||
|
menu: function(item) {
|
||||||
|
return '<div class="layui-tree-menu">' +
|
||||||
|
'<span class="layui-tree-add">Add</span>' +
|
||||||
|
'<span class="layui-tree-delete">Delete</span>' +
|
||||||
|
'</div>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//获取树节点
|
||||||
|
Tree.prototype.getNode = function(item, hasChild) {
|
||||||
|
var that = this,
|
||||||
|
options = that.options
|
||||||
|
var dom = that.getDom();
|
||||||
|
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>'
|
||||||
|
//展开箭头
|
||||||
|
,
|
||||||
|
dom.spread(item, hasChild)
|
||||||
|
|
||||||
|
//复选框/单选框
|
||||||
|
,
|
||||||
|
dom.checkbox(item)
|
||||||
|
|
||||||
|
//节点
|
||||||
|
,
|
||||||
|
dom.node(item)
|
||||||
|
//菜单
|
||||||
|
,
|
||||||
|
dom.menu()
|
||||||
|
,
|
||||||
|
'</li>'
|
||||||
|
].join(''));
|
||||||
|
return li;
|
||||||
|
}
|
||||||
|
|
||||||
|
//父绑定事件
|
||||||
|
Tree.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
//选中回调函数
|
||||||
|
Tree.prototype.change = function() {
|
||||||
|
var that = this,
|
||||||
|
options = that.options;
|
||||||
|
options.change(changeList);
|
||||||
|
},
|
||||||
|
|
||||||
|
//新增方法回调
|
||||||
|
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 ul = elem.children('ul'),
|
||||||
|
a = elem.children('a');
|
||||||
|
var addEvent = function(e) {
|
||||||
|
layui.stope(e);
|
||||||
|
var _addEvent = {
|
||||||
|
add: function(itemAddObj) {
|
||||||
|
if(!ul[0]) {
|
||||||
|
ul = $('<ul class="layui-show"></ul>');
|
||||||
|
elem.append(ul);
|
||||||
|
}
|
||||||
|
if(!arrow[0]) {
|
||||||
|
arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>');
|
||||||
|
elem.prepend(arrow);
|
||||||
|
that.spread(elem, item);
|
||||||
|
}
|
||||||
|
if(!elem.data('spread')) {
|
||||||
|
that.open(elem, ul, arrow)
|
||||||
|
}
|
||||||
|
var li = that.getNode(itemAddObj, false);
|
||||||
|
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 deleteBtn = elem.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('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
options.deleteClick(item, elem, _deleteEvent.done)
|
||||||
|
}
|
||||||
|
deleteBtn.on('click', deleteEvent);
|
||||||
|
}
|
||||||
|
|
||||||
|
//点击节点回调
|
||||||
|
Tree.prototype.click = function(elem, item) {
|
||||||
|
var that = this,
|
||||||
|
options = that.options;
|
||||||
|
elem.children('a').on('click', function(e) {
|
||||||
|
layui.stope(e);
|
||||||
|
options.click(item)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//节点选择
|
||||||
|
Tree.prototype.checkbox = function(elem, item) {
|
||||||
|
var that = this,
|
||||||
|
options = that.options;
|
||||||
|
var checkbox = elem.children('.layui-tree-check')
|
||||||
|
var ul = elem.children('ul'),
|
||||||
|
a = elem.children('a');
|
||||||
|
var check = function() {
|
||||||
|
var index = layui.findObj(changeList, item);
|
||||||
|
if(elem.data('check')) {
|
||||||
|
elem.data('check', null)
|
||||||
|
checkbox.html(icon.checkbox[0]);
|
||||||
|
} else {
|
||||||
|
elem.data('check', true);
|
||||||
|
checkbox.html(icon.checkbox[1]);
|
||||||
|
}
|
||||||
|
if(index === -1) {
|
||||||
|
changeList.push(item);
|
||||||
|
} else {
|
||||||
|
changeList.splice(index, 1);
|
||||||
|
}
|
||||||
|
that.change();
|
||||||
|
}
|
||||||
|
checkbox.on('click', check);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
//伸展节点
|
||||||
|
Tree.prototype.spread = function(elem, item) {
|
||||||
|
var that = this,
|
||||||
|
options = that.options;
|
||||||
|
var arrow = elem.children('.layui-tree-spread')
|
||||||
|
var ul = elem.children('ul'),
|
||||||
|
a = elem.children('a');
|
||||||
|
//如果没有子节点,则不执行
|
||||||
|
if(!ul[0]) return;
|
||||||
|
arrow.on('click', function() {
|
||||||
|
that.open(elem, ul, arrow)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//打开节点
|
||||||
|
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';
|
||||||
|
|
||||||
|
//屏蔽选中文字
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
@ -1,360 +1,215 @@
|
|||||||
/**
|
/**
|
||||||
|
|
||||||
@Name:layui.tree2.0 树组件
|
@Name:layui.tree 树组件
|
||||||
@Author:smallwei
|
@Author:贤心
|
||||||
@License:MIT
|
@License:MIT
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
layui.define('jquery', function(exports) {
|
|
||||||
"use strict";
|
layui.define('jquery', function(exports){
|
||||||
|
"use strict";
|
||||||
var $ = layui.$,
|
|
||||||
hint = layui.hint();
|
var $ = layui.$
|
||||||
//勾选集合
|
,hint = layui.hint();
|
||||||
var changeList = [];
|
|
||||||
//变量别名
|
var enterSkin = 'layui-tree-enter', Tree = function(options){
|
||||||
var props ={
|
this.options = options;
|
||||||
name: 'name',
|
};
|
||||||
id: 'id',
|
|
||||||
children:'children'
|
//图标
|
||||||
};
|
var icon = {
|
||||||
|
arrow: ['', ''] //箭头
|
||||||
var enterSkin = 'layui-tree-enter',
|
,checkbox: ['', ''] //复选框
|
||||||
Tree = function(options) {
|
,radio: ['', ''] //单选框
|
||||||
this.options = options;
|
,branch: ['', ''] //父节点
|
||||||
this.props = this.options.props || props;
|
,leaf: '' //叶节点
|
||||||
this.nameKey = this.props.name || props.name;
|
};
|
||||||
this.idKey = this.props.id || props.id;
|
|
||||||
this.childrenKey = this.props.children || props.children;
|
//初始化
|
||||||
};
|
Tree.prototype.init = function(elem){
|
||||||
//图标
|
var that = this;
|
||||||
var icon = {
|
elem.addClass('layui-box layui-tree'); //添加tree样式
|
||||||
arrow: ['', ''] //箭头
|
if(that.options.skin){
|
||||||
,
|
elem.addClass('layui-tree-skin-'+ that.options.skin);
|
||||||
checkbox: ['', ''] //复选框
|
}
|
||||||
,
|
that.tree(elem);
|
||||||
leaf: '' //叶节点
|
that.on(elem);
|
||||||
};
|
};
|
||||||
|
|
||||||
//初始化
|
//树节点解析
|
||||||
Tree.prototype.init = function(elem) {
|
Tree.prototype.tree = function(elem, children){
|
||||||
var that = this;
|
var that = this, options = that.options
|
||||||
elem.addClass('layui-box layui-tree'); //添加tree样式
|
var nodes = children || options.nodes;
|
||||||
if(that.options.skin) {
|
|
||||||
elem.addClass('layui-tree-skin-' + that.options.skin);
|
layui.each(nodes, function(index, item){
|
||||||
}
|
var hasChild = item.children && item.children.length > 0;
|
||||||
that.tree(elem);
|
var ul = $('<ul class="'+ (item.spread ? "layui-show" : "") +'"></ul>');
|
||||||
that.on(elem);
|
var li = $(['<li '+ (item.spread ? 'data-spread="'+ item.spread +'"' : '') +'>'
|
||||||
};
|
//展开箭头
|
||||||
|
,function(){
|
||||||
//树节点解析
|
return hasChild ? '<i class="layui-icon layui-tree-spread">'+ (
|
||||||
Tree.prototype.tree = function(elem, children) {
|
item.spread ? icon.arrow[1] : icon.arrow[0]
|
||||||
var that = this,
|
) +'</i>' : '';
|
||||||
options = that.options
|
}()
|
||||||
var nodes = children || options.nodes;
|
|
||||||
|
//复选框/单选框
|
||||||
layui.each(nodes, function(index, item) {
|
,function(){
|
||||||
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
|
return options.check ? (
|
||||||
var ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>');
|
'<i class="layui-icon layui-tree-check">'+ (
|
||||||
var li = that.getNode(item, hasChild);
|
options.check === 'checkbox' ? icon.checkbox[0] : (
|
||||||
//如果有子节点,则递归继续生成树
|
options.check === 'radio' ? icon.radio[0] : ''
|
||||||
if(hasChild) {
|
)
|
||||||
li.append(ul);
|
) +'</i>'
|
||||||
that.tree(ul, item[that.childrenKey]);
|
) : '';
|
||||||
}
|
}()
|
||||||
//伸展节点
|
|
||||||
that.spread(li, item);
|
//节点
|
||||||
that.bindUlEvent(li, item);
|
,function(){
|
||||||
elem.append(li);
|
return '<a href="'+ (item.href || 'javascript:;') +'" '+ (
|
||||||
|
options.target && item.href ? 'target=\"'+ options.target +'\"' : ''
|
||||||
});
|
) +'>'
|
||||||
};
|
+ ('<i class="layui-icon layui-tree-'+ (hasChild ? "branch" : "leaf") +'">'+ (
|
||||||
|
hasChild ? (
|
||||||
//节点dom拼接
|
item.spread ? icon.branch[1] : icon.branch[0]
|
||||||
Tree.prototype.getDom = function() {
|
) : icon.leaf
|
||||||
var that = this,
|
) +'</i>') //节点图标
|
||||||
options = that.options
|
+ ('<cite>'+ (item.name||'未命名') +'</cite></a>');
|
||||||
return {
|
}()
|
||||||
spread: function(item, hasChild) {
|
|
||||||
return hasChild ? '<i class="layui-icon layui-tree-spread">' + (
|
,'</li>'].join(''));
|
||||||
item.spread ? icon.arrow[1] : icon.arrow[0]
|
|
||||||
) + '</i>' : '';
|
//如果有子节点,则递归继续生成树
|
||||||
},
|
if(hasChild){
|
||||||
checkbox: function(item) {
|
li.append(ul);
|
||||||
return options.check ? (
|
that.tree(ul, item.children);
|
||||||
'<i class="layui-icon layui-tree-check">' + (
|
}
|
||||||
options.check === 'checkbox' ? icon.checkbox[0] : (
|
|
||||||
options.check === 'radio' ? icon.radio[0] : ''
|
elem.append(li);
|
||||||
)
|
|
||||||
) + '</i>'
|
//触发点击节点回调
|
||||||
) : '';
|
typeof options.click === 'function' && that.click(li, item);
|
||||||
},
|
|
||||||
node: function(item) {
|
//伸展节点
|
||||||
return '<a href="' + (item.href || 'javascript:;') + '" ' + (
|
that.spread(li, item);
|
||||||
options.target && item.href ? 'target=\"' + options.target + '\"' : ''
|
|
||||||
) + '>' +
|
//拖拽节点
|
||||||
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
|
options.drag && that.drag(li, item);
|
||||||
},
|
});
|
||||||
menu: function(item) {
|
};
|
||||||
return '<div class="layui-tree-menu">' +
|
|
||||||
'<span class="layui-tree-add">Add</span>' +
|
//点击节点回调
|
||||||
'<span class="layui-tree-delete">Delete</span>' +
|
Tree.prototype.click = function(elem, item){
|
||||||
'</div>'
|
var that = this, options = that.options;
|
||||||
}
|
elem.children('a').on('click', function(e){
|
||||||
}
|
layui.stope(e);
|
||||||
|
options.click(item)
|
||||||
}
|
});
|
||||||
//获取树节点
|
};
|
||||||
Tree.prototype.getNode = function(item, hasChild) {
|
|
||||||
var that = this,
|
//伸展节点
|
||||||
options = that.options
|
Tree.prototype.spread = function(elem, item){
|
||||||
var dom = that.getDom();
|
var that = this, options = that.options;
|
||||||
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>'
|
var arrow = elem.children('.layui-tree-spread')
|
||||||
//展开箭头
|
var ul = elem.children('ul'), a = elem.children('a');
|
||||||
,
|
|
||||||
dom.spread(item, hasChild)
|
//执行伸展
|
||||||
|
var open = function(){
|
||||||
//复选框/单选框
|
if(elem.data('spread')){
|
||||||
,
|
elem.data('spread', null)
|
||||||
dom.checkbox(item)
|
ul.removeClass('layui-show');
|
||||||
|
arrow.html(icon.arrow[0]);
|
||||||
//节点
|
a.find('.layui-icon').html(icon.branch[0]);
|
||||||
,
|
} else {
|
||||||
dom.node(item)
|
elem.data('spread', true);
|
||||||
//菜单
|
ul.addClass('layui-show');
|
||||||
,
|
arrow.html(icon.arrow[1]);
|
||||||
dom.menu()
|
a.find('.layui-icon').html(icon.branch[1]);
|
||||||
,
|
}
|
||||||
'</li>'
|
};
|
||||||
].join(''));
|
|
||||||
return li;
|
//如果没有子节点,则不执行
|
||||||
}
|
if(!ul[0]) return;
|
||||||
|
|
||||||
//父绑定事件
|
arrow.on('click', open);
|
||||||
Tree.prototype.bindUlEvent = function(li, item) {
|
a.on('dblclick', open);
|
||||||
var that = this,
|
}
|
||||||
options = that.options
|
|
||||||
//触发点击节点回调
|
//通用事件
|
||||||
typeof options.click === 'function' && that.click(li, item);
|
Tree.prototype.on = function(elem){
|
||||||
|
var that = this, options = that.options;
|
||||||
//节点选择
|
var dragStr = 'layui-tree-drag';
|
||||||
typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item);
|
|
||||||
|
//屏蔽选中文字
|
||||||
//新增方法
|
elem.find('i').on('selectstart', function(e){
|
||||||
typeof options.addClick === 'function' && that.add(li, item);
|
return false
|
||||||
|
});
|
||||||
//删除方法
|
|
||||||
typeof options.deleteClick === 'function' && that.delete(li, item);
|
//拖拽
|
||||||
|
if(options.drag){
|
||||||
//拖拽节点
|
$(document).on('mousemove', function(e){
|
||||||
options.drag && that.drag(li, item);
|
var move = that.move;
|
||||||
}
|
if(move.from){
|
||||||
|
var to = move.to, treeMove = $('<div class="layui-box '+ dragStr +'"></div>');
|
||||||
//选中回调函数
|
e.preventDefault();
|
||||||
Tree.prototype.change = function() {
|
$('.' + dragStr)[0] || $('body').append(treeMove);
|
||||||
var that = this,
|
var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;
|
||||||
options = that.options;
|
(dragElem).addClass('layui-show').html(move.from.elem.children('a').html());
|
||||||
options.change(changeList);
|
dragElem.css({
|
||||||
},
|
left: e.pageX + 10
|
||||||
|
,top: e.pageY + 10
|
||||||
//新增方法回调
|
})
|
||||||
Tree.prototype.add = function(elem, item) {
|
}
|
||||||
var that = this,
|
}).on('mouseup', function(){
|
||||||
options = that.options;
|
var move = that.move;
|
||||||
var addBtn = elem.children('.layui-tree-menu').children('.layui-tree-add')
|
if(move.from){
|
||||||
var arrow = elem.children('.layui-tree-spread')
|
move.from.elem.children('a').removeClass(enterSkin);
|
||||||
var ul = elem.children('ul'),
|
move.to && move.to.elem.children('a').removeClass(enterSkin);
|
||||||
a = elem.children('a');
|
that.move = {};
|
||||||
var addEvent = function(e) {
|
$('.' + dragStr).remove();
|
||||||
layui.stope(e);
|
}
|
||||||
var _addEvent = {
|
});
|
||||||
add: function(itemAddObj) {
|
}
|
||||||
if(!ul[0]) {
|
};
|
||||||
ul = $('<ul class="layui-show"></ul>');
|
|
||||||
elem.append(ul);
|
//拖拽节点
|
||||||
}
|
Tree.prototype.move = {};
|
||||||
if(!arrow[0]) {
|
Tree.prototype.drag = function(elem, item){
|
||||||
arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>');
|
var that = this, options = that.options;
|
||||||
elem.prepend(arrow);
|
var a = elem.children('a'), mouseenter = function(){
|
||||||
that.spread(elem, item);
|
var othis = $(this), move = that.move;
|
||||||
}
|
if(move.from){
|
||||||
if(!elem.data('spread')) {
|
move.to = {
|
||||||
that.open(elem, ul, arrow)
|
item: item
|
||||||
}
|
,elem: elem
|
||||||
var li = that.getNode(itemAddObj, false);
|
};
|
||||||
that.bindUlEvent(li, itemAddObj);
|
othis.addClass(enterSkin);
|
||||||
ul.append(li);
|
}
|
||||||
}
|
};
|
||||||
}
|
a.on('mousedown', function(){
|
||||||
options.addClick(item, elem, _addEvent.add)
|
var move = that.move
|
||||||
}
|
move.from = {
|
||||||
addBtn.on('click', addEvent);
|
item: item
|
||||||
}
|
,elem: elem
|
||||||
|
};
|
||||||
//删除方法回调
|
});
|
||||||
Tree.prototype.delete = function(elem, item) {
|
a.on('mouseenter', mouseenter).on('mousemove', mouseenter)
|
||||||
var that = this,
|
.on('mouseleave', function(){
|
||||||
options = that.options;
|
var othis = $(this), move = that.move;
|
||||||
var deleteBtn = elem.children('.layui-tree-menu').children('.layui-tree-delete')
|
if(move.from){
|
||||||
var ul = elem.children('ul'),
|
delete move.to;
|
||||||
a = elem.children('a');
|
othis.removeClass(enterSkin);
|
||||||
var deleteEvent = function(e) {
|
}
|
||||||
layui.stope(e);
|
});
|
||||||
var _deleteEvent = {
|
};
|
||||||
done: function() {
|
|
||||||
elem.html('');
|
//暴露接口
|
||||||
}
|
exports('tree', function(options){
|
||||||
}
|
var tree = new Tree(options = options || {});
|
||||||
options.deleteClick(item, elem, _deleteEvent.done)
|
var elem = $(options.elem);
|
||||||
}
|
if(!elem[0]){
|
||||||
deleteBtn.on('click', deleteEvent);
|
return hint.error('layui.tree 没有找到'+ options.elem +'元素');
|
||||||
}
|
}
|
||||||
|
tree.init(elem);
|
||||||
//点击节点回调
|
});
|
||||||
Tree.prototype.click = function(elem, item) {
|
});
|
||||||
var that = this,
|
|
||||||
options = that.options;
|
|
||||||
elem.children('a').on('click', function(e) {
|
|
||||||
layui.stope(e);
|
|
||||||
options.click(item)
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//节点选择
|
|
||||||
Tree.prototype.checkbox = function(elem, item) {
|
|
||||||
var that = this,
|
|
||||||
options = that.options;
|
|
||||||
var checkbox = elem.children('.layui-tree-check')
|
|
||||||
var ul = elem.children('ul'),
|
|
||||||
a = elem.children('a');
|
|
||||||
var check = function() {
|
|
||||||
var index = layui.findObj(changeList, item);
|
|
||||||
if(elem.data('check')) {
|
|
||||||
elem.data('check', null)
|
|
||||||
checkbox.html(icon.checkbox[0]);
|
|
||||||
} else {
|
|
||||||
elem.data('check', true);
|
|
||||||
checkbox.html(icon.checkbox[1]);
|
|
||||||
}
|
|
||||||
if(index === -1) {
|
|
||||||
changeList.push(item);
|
|
||||||
} else {
|
|
||||||
changeList.splice(index, 1);
|
|
||||||
}
|
|
||||||
that.change();
|
|
||||||
}
|
|
||||||
checkbox.on('click', check);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
//伸展节点
|
|
||||||
Tree.prototype.spread = function(elem, item) {
|
|
||||||
var that = this,
|
|
||||||
options = that.options;
|
|
||||||
var arrow = elem.children('.layui-tree-spread')
|
|
||||||
var ul = elem.children('ul'),
|
|
||||||
a = elem.children('a');
|
|
||||||
//如果没有子节点,则不执行
|
|
||||||
if(!ul[0]) return;
|
|
||||||
arrow.on('click', function() {
|
|
||||||
that.open(elem, ul, arrow)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//打开节点
|
|
||||||
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';
|
|
||||||
|
|
||||||
//屏蔽选中文字
|
|
||||||
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('tree', 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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
@ -56,6 +56,7 @@
|
|||||||
,layedit: 'modules/layedit' //富文本编辑器
|
,layedit: 'modules/layedit' //富文本编辑器
|
||||||
,form: 'modules/form' //表单集
|
,form: 'modules/form' //表单集
|
||||||
,upload: 'modules/upload' //上传
|
,upload: 'modules/upload' //上传
|
||||||
|
,atree: 'modules/atree' //新树结构
|
||||||
,tree: 'modules/tree' //树结构
|
,tree: 'modules/tree' //树结构
|
||||||
,table: 'modules/table' //表格
|
,table: 'modules/table' //表格
|
||||||
,element: 'modules/element' //常用元素操作
|
,element: 'modules/element' //常用元素操作
|
||||||
|
Loading…
Reference in New Issue
Block a user