1555 lines
79 KiB
JavaScript
Executable File
1555 lines
79 KiB
JavaScript
Executable File
/**
|
||
* @Name: 基于layui的tree重写
|
||
* @Author: 李祥
|
||
* @License：MIT
|
||
* 最近修改时间: 2019/09/24
|
||
*/
|
||
|
||
layui.define(["jquery","laytpl"], function (exports) {
|
||
var $ = layui.jquery;
|
||
var laytpl = layui.laytpl;
|
||
var hint = layui.hint();
|
||
|
||
var MOD_NAME="eleTree";
|
||
|
||
//外部接口
|
||
var eleTree={
|
||
//事件监听
|
||
on: function(events, callback){
|
||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||
},
|
||
render: function(options) {
|
||
var inst = new Class(options);
|
||
return thisTree.call(inst);
|
||
}
|
||
}
|
||
|
||
var thisTree=function() {
|
||
var _self=this;
|
||
var options = _self.config;
|
||
|
||
// 暴漏外面的方法
|
||
return {
|
||
// 接收两个参数，1. 节点 key 2. 节点数据的数组
|
||
updateKeyChildren: function(key,data) {
|
||
if(options.data.length===0) return;
|
||
return _self.updateKeyChildren.call(_self,key,data);
|
||
},
|
||
updateKeySelf: function(key,data) {
|
||
if(options.data.length===0) return;
|
||
return _self.updateKeySelf.call(_self,key,data);
|
||
},
|
||
remove: function(key) {
|
||
if(options.data.length===0) return;
|
||
return _self.remove.call(_self,key);
|
||
},
|
||
append: function(key,data) {
|
||
if(options.data.length===0) return;
|
||
return _self.append.call(_self,key,data);
|
||
},
|
||
insertBefore: function(key,data) {
|
||
if(options.data.length===0) return;
|
||
return _self.insertBefore.call(_self,key,data);
|
||
},
|
||
insertAfter: function(key,data) {
|
||
if(options.data.length===0) return;
|
||
return _self.insertAfter.call(_self,key,data);
|
||
},
|
||
// 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
|
||
getChecked: function(leafOnly, includeHalfChecked) {
|
||
if(options.data.length===0) return;
|
||
return _self.getChecked.call(_self,leafOnly, includeHalfChecked);
|
||
},
|
||
// 接收勾选节点数据的数组
|
||
setChecked: function(data,isReset) {
|
||
if(options.data.length===0) return;
|
||
return _self.setChecked.call(_self,data,isReset);
|
||
},
|
||
// 取消选中
|
||
unCheckNodes: function() {
|
||
if(options.data.length===0) return;
|
||
return _self.unCheckNodes.call(_self);
|
||
},
|
||
unCheckArrNodes: function(data) {
|
||
if(options.data.length===0) return;
|
||
return _self.unCheckArrNodes.call(_self,data);
|
||
},
|
||
expandAll: function() {
|
||
if(options.data.length===0) return;
|
||
return _self.expandAll.call(_self);
|
||
},
|
||
expandNode: function(key) {
|
||
if(options.data.length===0) return;
|
||
return _self.expandNode.call(_self,key);
|
||
},
|
||
unExpandNode: function(key) {
|
||
if(options.data.length===0) return;
|
||
return _self.unExpandNode.call(_self,key);
|
||
},
|
||
toggleExpandNode: function(key) {
|
||
if(options.data.length===0) return;
|
||
return _self.toggleExpandNode.call(_self,key);
|
||
},
|
||
unExpandAll: function() {
|
||
if(options.data.length===0) return;
|
||
return _self.unExpandAll.call(_self);
|
||
},
|
||
reload: function(options) {
|
||
return _self.reload.call(_self,options);
|
||
},
|
||
search: function(value) {
|
||
return _self.search.call(_self,value);
|
||
},
|
||
getAllNodeData: function() {
|
||
return _self.getAllNodeData.call(_self);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 模板渲染
|
||
var TPL_ELEM=function(options,floor,parentStatus) {
|
||
return [
|
||
'{{# for(var i=0;i<d.length;i++){ }}',
|
||
'<div class="eleTree-node {{# if(d[i].visible===false){ }}eleTree-search-hide{{# } }}" data-padding="'+options.indent*floor+'" data-'+options.customKey+'="{{d[i]["'+options.request.key+'"]}}" eletree-floor="'+floor+'">',
|
||
function() {
|
||
// 是否显示连线
|
||
if(!options.showLine) return '';
|
||
if(floor!==0){
|
||
var s='<i class="eleTree-node-verticalline" style="left: '+(9+options.indent*(floor-1))+'px;"></i>'+
|
||
'<i class="eleTree-node-horizontalline" style="width: '+(options.indent-4)+'px;left: '+(9+options.indent*(floor-1))+'px;"></i>';
|
||
return s;
|
||
}else{
|
||
var s='<i class="eleTree-node-verticalline" style="left: '+(9+options.indent*(floor-1))+'px;display: none;"></i>'+
|
||
'<i class="eleTree-node-horizontalline" style="width: '+(options.indent-4)+'px;left: '+(9+options.indent*(floor-1))+'px;display: none;"></i>';
|
||
return s;
|
||
}
|
||
}(),
|
||
'<div class="eleTree-node-content" style="padding-left: '+(options.indent*floor)+'px;">',
|
||
'<span class="eleTree-node-content-icon">',
|
||
'<i class="layui-icon layui-icon-triangle-r ',
|
||
function() {
|
||
if(options.lazy){
|
||
var str=[
|
||
'{{# if(!d[i]["'+options.request.isLeaf+'"]){ }}',
|
||
'lazy-icon" ></i>',
|
||
'{{# }else{ }}',
|
||
'leaf-icon" style="color: transparent;" ></i>',
|
||
'{{# } }}'
|
||
].join("");
|
||
return str;
|
||
}
|
||
return ['{{# if(!d[i]["'+options.request.children+'"] || d[i]["'+options.request.children+'"].length===0){ }}',
|
||
'leaf-icon" style="color: transparent;"',
|
||
'{{# } }}',
|
||
'"></i>'
|
||
].join("");
|
||
}(),
|
||
'</span>',
|
||
function() {
|
||
if(options.showCheckbox){
|
||
var status="";
|
||
if(options.checkStrictly){
|
||
status='"0"';
|
||
}else if(parentStatus==="1"){
|
||
status='"1" checked';
|
||
}else if(parentStatus==="2"){
|
||
status='"2"';
|
||
}else{
|
||
status='"0"';
|
||
}
|
||
return [
|
||
'{{# if(d[i]["'+options.request.checked+'"]) { }}',
|
||
'<input type="checkbox" name="eleTree-node" lay-ignore eleTree-status="1" checked data-checked class="layui-hide eleTree-hideen ',
|
||
'{{# }else{ }}',
|
||
'<input type="checkbox" name="eleTree-node" lay-ignore eleTree-status='+status+' class="layui-hide eleTree-hideen ',
|
||
'{{# } }}',
|
||
|
||
'{{# if(d[i]["'+options.request.disabled+'"]) { }}',
|
||
'eleTree-disabled',
|
||
'{{# } }}',
|
||
'" />'
|
||
].join("");
|
||
}
|
||
return ''
|
||
}(),
|
||
'<span class="eleTree-node-content-label">{{d[i]["'+options.request.name+'"]}}</span>',
|
||
'</div>',
|
||
'<div class="eleTree-node-group" style="display: none;">',
|
||
'</div>',
|
||
'</div>',
|
||
'{{# } }}'
|
||
].join("");
|
||
}
|
||
|
||
var TPL_NoText=function() {
|
||
return '<h3 class="eleTree-noText" style="text-align: center;height: 30px;line-height: 30px;color: #888;">{{d.emptText}}</h3>';
|
||
}
|
||
|
||
var Class=function(options) {
|
||
options.response=$.extend({}, this.config.response, options.response);
|
||
options.request=$.extend({}, this.config.request, options.request);
|
||
this.config = $.extend({}, this.config, options);
|
||
this.config.customKey=this.customKeyInit();
|
||
this.prevClickEle=null;
|
||
this.nameIndex=1;
|
||
this.isRenderAllDom=false;
|
||
this.render();
|
||
};
|
||
|
||
Class.prototype={
|
||
constructor: Class,
|
||
config: {
|
||
elem: "",
|
||
data: [],
|
||
emptText: "暂无数据", // 内容为空的时候展示的文本
|
||
renderAfterExpand: true, // 是否在第一次展开某个树节点后才渲染其子节点
|
||
highlightCurrent: false, // 是否高亮当前选中节点，默认值是 false。
|
||
defaultExpandAll: false, // 是否默认展开所有节点
|
||
expandOnClickNode: true, // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
|
||
checkOnClickNode: false, // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
|
||
defaultExpandedKeys: [], // 默认展开的节点的 key 的数组
|
||
autoExpandParent: true, // 展开子节点的时候是否自动展开父节点
|
||
showCheckbox: false, // 节点是否可被选择
|
||
checkStrictly: false, // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
|
||
defaultCheckedKeys: [], // 默认勾选的节点的 key 的数组
|
||
accordion: false, // 是否每次只打开一个同级树节点展开（手风琴效果）
|
||
indent: 16, // 相邻级节点间的水平缩进，单位为像素
|
||
lazy: false, // 是否懒加载子节点，需与 load 方法结合使用
|
||
load: function() {}, // 加载子树数据的方法，仅当 lazy 属性为true 时生效
|
||
draggable: false, // 是否开启拖拽节点功能
|
||
contextmenuList: [], // 启用右键菜单，支持的操作有："copy","add","edit","remove"
|
||
searchNodeMethod: null, // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
|
||
showLine: false, // 是否显示连线，默认false
|
||
|
||
method: "get",
|
||
url: "",
|
||
contentType: "",
|
||
headers: {},
|
||
done: null,
|
||
|
||
response: {
|
||
statusName: "code",
|
||
statusCode: 0,
|
||
dataName: "data"
|
||
},
|
||
request: {
|
||
name: "label",
|
||
key: "id",
|
||
children: "children",
|
||
disabled: "disabled",
|
||
checked: "checked",
|
||
isLeaf: "isLeaf"
|
||
},
|
||
customKey: "id", // 自定义key转义，即appKey=>app-id
|
||
},
|
||
render: function() {
|
||
if(this.config.indent>30){
|
||
this.config.indent=30;
|
||
}else if(this.config.indent<10){
|
||
this.config.indent=10;
|
||
}
|
||
var options=this.config;
|
||
options.where=options.where || {};
|
||
if(!options.elem) return hint.error("缺少elem参数");
|
||
options.elem=typeof options.elem === "string" ? $(options.elem) : options.elem;
|
||
this.filter=options.elem.attr("lay-filter");
|
||
// load加载框
|
||
options.elem.append('<div class="eleTree-loadData"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></div>')
|
||
|
||
// 判断加载方式
|
||
if(options.data.length===0){
|
||
this.ajaxGetData();
|
||
}else{
|
||
this.renderData();
|
||
}
|
||
},
|
||
renderData: function() {
|
||
var options=this.config;
|
||
$(this.config.elem).off(); // 取消事件绑定，防止多次绑定事件
|
||
// 渲染第一层
|
||
laytpl(TPL_ELEM(options,0)).render(options.data, function(string){
|
||
options.elem.html(string);
|
||
});
|
||
// 懒加载 > 展开所有 > 初始展开项 > 初始渲染所有子节点 > 初始选中项 > 每次点击只渲染当前层（默认）
|
||
// 判断所有dom是否全部加载
|
||
if(!options.lazy){
|
||
if(!options.renderAfterExpand || options.defaultExpandAll || options.defaultExpandedKeys.length>0 || options.defaultCheckedKeys.length>0){
|
||
this.initialExpandAll(options.data,[],1);
|
||
}
|
||
}
|
||
|
||
this.eleTreeEvent();
|
||
this.checkboxRender();
|
||
this.checkboxEvent();
|
||
this.defaultChecked();
|
||
this.nodeEvent();
|
||
this.rightClickMenu();
|
||
if(!options.checkStrictly){
|
||
this.checkboxInit();
|
||
}
|
||
},
|
||
ajaxGetData: function() {
|
||
var options=this.config;
|
||
var _self=this;
|
||
if(!options.url) {
|
||
laytpl(TPL_NoText()).render(options, function(string){
|
||
options.elem.html(string);
|
||
});
|
||
return;
|
||
}
|
||
var data = $.extend({}, options.where);
|
||
if(options.contentType && options.contentType.indexOf("application/json") == 0){ //提交 json 格式
|
||
data = JSON.stringify(data);
|
||
}
|
||
|
||
$.ajax({
|
||
type: options.method || 'get'
|
||
,url: options.url
|
||
,contentType: options.contentType
|
||
,data: data
|
||
,dataType: 'json'
|
||
,headers: options.headers || {}
|
||
,success: function(res){
|
||
if(res[options.response.statusName] != options.response.statusCode || !res[options.response.dataName]){
|
||
hint.error("请检查数据格式是否符合规范");
|
||
typeof options.done === 'function' && options.done(res);
|
||
return;
|
||
}
|
||
options.data=res[options.response.dataName];
|
||
_self.renderData();
|
||
typeof options.done === 'function' && options.done(res);
|
||
}
|
||
});
|
||
},
|
||
reload: function(options) {
|
||
var _self=this;
|
||
if(this.config.data && this.config.data.constructor === Array) this.config.data=[];
|
||
this.config = $.extend({}, this.config, options);
|
||
// $(this.config.elem).off(); // 取消事件绑定，防止多次绑定事件
|
||
// reload记录选中的数据
|
||
// this.getChecked().forEach(function(val) {
|
||
// if($.inArray(val.key,this.config.defaultCheckedKeys)===-1){
|
||
// this.config.defaultCheckedKeys.push(val.key);
|
||
// }
|
||
// },this);
|
||
return eleTree.render(this.config)
|
||
},
|
||
// 自定义data属性修改，即 appId=>app-id，解决key包含大写的问题
|
||
customKeyInit: function() {
|
||
var options=this.config;
|
||
var key="";
|
||
for(var i=0;i<options.request.key.length;i++){
|
||
var s=options.request.key.charAt(i);
|
||
key+=(/[A-Z]/.test(s)) ? ("-"+s.toLocaleLowerCase()) : s;
|
||
}
|
||
return key;
|
||
},
|
||
// 下拉
|
||
eleTreeEvent: function() {
|
||
var _self=this;
|
||
var options=this.config;
|
||
// 下拉
|
||
var expandOnClickNode=options.expandOnClickNode?".eleTree-node-content":".eleTree-node-content>.eleTree-node-content-icon";
|
||
options.elem.on("click",expandOnClickNode,function(e) {
|
||
e.stopPropagation();
|
||
var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
|
||
var eleNode=eleTreeNodeContent.parent(".eleTree-node");
|
||
var sibNode=eleTreeNodeContent.siblings(".eleTree-node-group");
|
||
var el=eleTreeNodeContent.children(".eleTree-node-content-icon").children(".layui-icon");
|
||
|
||
if(el.hasClass("icon-rotate")){
|
||
// 合并
|
||
sibNode.hide("fast");
|
||
el.removeClass("icon-rotate");
|
||
return;
|
||
}
|
||
|
||
if(sibNode.children(".eleTree-node").length===0){
|
||
var floor=Number(eleNode.attr("eletree-floor"))+1;
|
||
|
||
// 选择祖父
|
||
var selectParentsFn=function() {
|
||
if(!options.checkStrictly){
|
||
var eleNode1=sibNode.children(".eleTree-node").eq(0);
|
||
if(eleNode1.length!==0){
|
||
var siblingNode1=eleNode1.siblings(".eleTree-node");
|
||
var item1=eleNode1.children(".eleTree-node-content").children(".eleTree-hideen").get(0);
|
||
_self.selectParents(item1,eleNode1,siblingNode1);
|
||
}
|
||
}
|
||
}
|
||
|
||
var data=_self.reInitData(eleNode);
|
||
var d=data.currentData;
|
||
// 是否懒加载
|
||
if(options.lazy && el.hasClass("lazy-icon")){
|
||
el.removeClass("layui-icon-triangle-r").addClass("layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop");
|
||
options.load(d,function(getData) {
|
||
// 如果原来有数据则合并，没有则赋值
|
||
if(d[options.request.children]){
|
||
d[options.request.children]=d[options.request.children].concat(getData);
|
||
}else{
|
||
d[options.request.children]=getData;
|
||
}
|
||
var eletreeStatus=eleTreeNodeContent.children("input.eleTree-hideen").attr("eletree-status");
|
||
if(d[options.request.children] && d[options.request.children].length>0){
|
||
// 只渲染获取到的数据
|
||
laytpl(TPL_ELEM(options,floor,eletreeStatus)).render(getData, function(string){
|
||
sibNode.append(string).show("fast");
|
||
});
|
||
}else{
|
||
el.css("color","transparent").addClass("leaf-icon");
|
||
}
|
||
el.removeClass("lazy-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop").addClass("layui-icon-triangle-r icon-rotate");
|
||
|
||
// 懒加载子元素选择祖父
|
||
selectParentsFn();
|
||
_self.checkboxRender();
|
||
})
|
||
}else{
|
||
var eletreeStatus=eleTreeNodeContent.children("input.eleTree-hideen").attr("eletree-status");
|
||
if(d[options.request.children] && d[options.request.children].length>0){
|
||
laytpl(TPL_ELEM(options,floor,eletreeStatus)).render(d[options.request.children], function(string){
|
||
sibNode.append(string).show("fast");
|
||
el.addClass("icon-rotate");
|
||
});
|
||
// 选择祖父
|
||
selectParentsFn();
|
||
_self.checkboxRender();
|
||
}
|
||
}
|
||
}else{
|
||
// 有子节点则展开子节点
|
||
sibNode.show("fast");
|
||
el.addClass("icon-rotate");
|
||
}
|
||
|
||
// 手风琴效果
|
||
if(options.accordion){
|
||
var node=eleTreeNodeContent.parent(".eleTree-node").siblings(".eleTree-node");
|
||
node.children(".eleTree-node-group").hide("fast");
|
||
node.children(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").removeClass("icon-rotate");
|
||
}
|
||
})
|
||
},
|
||
// checkbox选中
|
||
checkboxEvent: function() {
|
||
var options=this.config;
|
||
var _self=this;
|
||
var checkOnClickNode=options.checkOnClickNode?".eleTree-node-content":".eleTree-checkbox";
|
||
// input添加属性eleTree-status：即input的三种状态，"0":未选中，"1":选中，"2":子孙部分选中
|
||
options.elem.on("click",checkOnClickNode,function(e) {
|
||
e.stopPropagation();
|
||
var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
|
||
var checkbox=eleTreeNodeContent.children(".eleTree-checkbox");
|
||
if(checkbox.hasClass("eleTree-checkbox-disabled")) return;
|
||
// 获取点击所在数据
|
||
var node=eleTreeNodeContent.parent(".eleTree-node");
|
||
// var d=_self.reInitData(node).currentData;
|
||
// 实际的input
|
||
var inp=checkbox.siblings(".eleTree-hideen").get(0);
|
||
var childNode=eleTreeNodeContent.siblings(".eleTree-node-group").find("input[name='eleTree-node']");
|
||
|
||
// 添加active背景
|
||
if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
|
||
if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
|
||
_self.prevClickEle=eleTreeNodeContent;
|
||
|
||
if(!inp) return;
|
||
|
||
if(inp.checked){
|
||
// 反选自身
|
||
$(inp).prop("checked",false).attr("eleTree-status","0").removeAttr("data-checked");
|
||
// 点击祖父层选中子孙层
|
||
if(!options.checkStrictly){
|
||
childNode.prop("checked",false).attr("eleTree-status","0").removeAttr("data-checked");
|
||
}
|
||
|
||
}else{
|
||
// 反选自身
|
||
$(inp).prop("checked",true).attr("eleTree-status","1");
|
||
// 点击祖父层选中子孙层
|
||
if(!options.checkStrictly){
|
||
childNode.prop("checked",true).attr("eleTree-status","1");
|
||
}
|
||
}
|
||
|
||
var eleNode=eleTreeNodeContent.parent(".eleTree-node");
|
||
// 点击子孙层选中祖父层(递归)
|
||
if(!options.checkStrictly){
|
||
var siblingNode=eleNode.siblings(".eleTree-node");
|
||
// 点击子孙层选中祖父层(递归)
|
||
_self.selectParents(inp,eleNode,siblingNode);
|
||
}
|
||
|
||
_self.checkboxRender();
|
||
|
||
layui.event.call(inp, MOD_NAME, 'nodeChecked('+ _self.filter +')', {
|
||
node: eleNode,
|
||
data: _self.reInitData(eleNode),
|
||
isChecked: inp.checked
|
||
});
|
||
})
|
||
},
|
||
// 对后台数据有 checked:true 的默认选中项渲染父子层
|
||
checkboxInit: function() {
|
||
var options=this.config;
|
||
var _self=this;
|
||
options.elem.find("input[data-checked]").each(function(index,item) {
|
||
var checkboxEl=$(item).siblings(".eleTree-checkbox");
|
||
var childNode=checkboxEl.parent(".eleTree-node-content").siblings(".eleTree-node-group").find("input[name='eleTree-node']");
|
||
// 选择当前
|
||
$(item).prop("checked","checked").attr("eleTree-status","1");
|
||
checkboxEl.addClass("eleTree-checkbox-checked");
|
||
checkboxEl.children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
|
||
if(options.checkStrictly) return;
|
||
// 选择子孙
|
||
childNode.prop("checked","checked").attr("eleTree-status","1");
|
||
childNode.siblings(".eleTree-checkbox").addClass("eleTree-checkbox-checked");
|
||
childNode.siblings(".eleTree-checkbox").children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
|
||
|
||
// 选择祖父
|
||
var eleNode=checkboxEl.parent(".eleTree-node-content").parent(".eleTree-node");
|
||
var siblingNode=eleNode.siblings(".eleTree-node");
|
||
_self.selectParents(item,eleNode,siblingNode);
|
||
})
|
||
_self.checkboxRender();
|
||
},
|
||
// 通过子元素选中祖父元素
|
||
selectParents: function(inp,eleNode,siblingNode) {
|
||
// inp: 实际input(dom元素)
|
||
// eleNode: input父层类（.eleTree-node）
|
||
// siblingNode: 父层同级兄弟
|
||
while (Number(eleNode.attr("eletree-floor"))!==0) {
|
||
// 同级input状态存入数组
|
||
var arr=[];
|
||
arr.push($(inp).attr("eleTree-status"));
|
||
siblingNode.each(function(index,item) {
|
||
var siblingIsChecked=$(item).children(".eleTree-node-content").children("input[name='eleTree-node']").attr("eleTree-status");
|
||
arr.push(siblingIsChecked);
|
||
})
|
||
// 父元素的实际input
|
||
var parentInput=eleNode.parent(".eleTree-node-group").siblings(".eleTree-node-content").children("input[name='eleTree-node']");
|
||
// 父元素的checkbox替代
|
||
var parentCheckbox=parentInput.siblings(".eleTree-checkbox");
|
||
// 子都选中则选中父
|
||
if(arr.every(function(val) {
|
||
return val==="1";
|
||
})){
|
||
parentInput.prop("checked",true).attr("eleTree-status","1");
|
||
}
|
||
// 子有一个未选中则checkbox第三种状态
|
||
if(arr.some(function(val) {
|
||
return val==="0" || val==="2";
|
||
})){
|
||
parentInput.attr("eleTree-status","2");
|
||
}
|
||
// 子全部未选中则取消父选中(并且取消第三种状态)
|
||
if(arr.every(function(val) {
|
||
return val==="0";
|
||
})){
|
||
parentInput.prop("checked",false);
|
||
parentInput.attr("eleTree-status","0");
|
||
}
|
||
|
||
var parentNode=eleNode.parents("[eletree-floor='"+(Number(eleNode.attr("eletree-floor"))-1)+"']");
|
||
var parentCheckbox=parentNode.children(".eleTree-node-content").children("input[name='eleTree-node']").get(0);
|
||
var parentSiblingNode=parentNode.siblings(".eleTree-node");
|
||
eleNode=parentNode;
|
||
inp=parentCheckbox;
|
||
siblingNode=parentSiblingNode;
|
||
}
|
||
},
|
||
// 初始展开所有
|
||
initialExpandAll: function(data,arr,floor,isMethodsExpandAll) {
|
||
var options=this.config;
|
||
var _self=this;
|
||
this.isRenderAllDom=true;
|
||
data.forEach(function(val,index) {
|
||
arr.push(index);
|
||
if(val[options.request.children] && val[options.request.children].length>0){
|
||
var el=options.elem.children(".eleTree-node").eq(arr[0]).children(".eleTree-node-group");
|
||
for(var i=1;i<arr.length;i++){
|
||
el=el.children(".eleTree-node").eq(arr[i]).children(".eleTree-node-group");
|
||
}
|
||
laytpl(TPL_ELEM(options,floor)).render(val[options.request.children], function(string){
|
||
el.append(string);
|
||
// 判断是否展开所有
|
||
if(options.defaultExpandAll || isMethodsExpandAll){
|
||
el.show().siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
|
||
}else if(options.defaultExpandedKeys.length>0) {
|
||
// 继续展开祖父层
|
||
var f=function(eleP) {
|
||
if(options.autoExpandParent){
|
||
eleP.parents(".eleTree-node").each(function(i,item) {
|
||
if($(item).data(options.request.key)){
|
||
$(item).children(".eleTree-node-group").show().siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 展开指定id项
|
||
var id=el.parent(".eleTree-node").data(options.request.key);
|
||
if($.inArray(id,options.defaultExpandedKeys)!==-1){
|
||
// 直接展开子节点
|
||
el.show().siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
|
||
// 展开子项是否继续展开祖父项
|
||
f(el.parent(".eleTree-node[data-"+options.customKey+"]"));
|
||
}else{
|
||
// 如当前节点的子节点有展开项，则展开当前子节点的祖父层
|
||
el.children(".eleTree-node").each(function(index, item) {
|
||
var id=$(item).data(options.request.key);
|
||
if($.inArray(id,options.defaultExpandedKeys)!==-1){
|
||
f($(item));
|
||
return false;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
});
|
||
floor++;
|
||
_self.initialExpandAll(val[options.request.children],arr,floor,isMethodsExpandAll);
|
||
floor--;
|
||
}
|
||
// 重置数组索引
|
||
arr.pop();
|
||
})
|
||
},
|
||
// 选中单个节点
|
||
checkedOneNode: function(nodeContent){
|
||
var options=this.config;
|
||
var inp=nodeContent.children("input.eleTree-hideen").get(0);
|
||
$(inp).prop("checked",true).attr("eleTree-status","1");
|
||
|
||
if(options.checkStrictly) return;
|
||
|
||
// 点击祖父层选中子孙层
|
||
var childNode=nodeContent.siblings(".eleTree-node-group").find("input[name='eleTree-node']");
|
||
childNode.prop("checked",true).attr("eleTree-status","1");
|
||
|
||
var eleNode=nodeContent.parent(".eleTree-node");
|
||
var siblingNode=eleNode.siblings(".eleTree-node");
|
||
// 点击子孙层选中祖父层(递归)
|
||
this.selectParents(inp,eleNode,siblingNode);
|
||
},
|
||
// 初始默认选中
|
||
defaultChecked: function(dataChecked) {
|
||
var options=this.config;
|
||
var _self=this;
|
||
var arr=dataChecked || options.defaultCheckedKeys;
|
||
if(arr.length===0){
|
||
return false;
|
||
}
|
||
arr.forEach(function(val,index) {
|
||
var nodeContent=options.elem.find("[data-"+options.customKey+"='"+val+"']").children(".eleTree-node-content");
|
||
nodeContent.length>0 && _self.checkedOneNode(nodeContent);
|
||
})
|
||
this.checkboxInit();
|
||
},
|
||
// 自定义checkbox解析
|
||
checkboxRender: function() {
|
||
var options=this.config;
|
||
options.elem.find(".eleTree-checkbox").remove();
|
||
options.elem.find("input.eleTree-hideen[type=checkbox]").each(function(index,item){
|
||
if($(item).hasClass("eleTree-disabled")){
|
||
$(item).after('<div class="eleTree-checkbox eleTree-checkbox-disabled"><i class="layui-icon"></i></div>');
|
||
}else{
|
||
$(item).after('<div class="eleTree-checkbox"><i class="layui-icon"></i></div>');
|
||
}
|
||
|
||
var checkbox=$(item).siblings(".eleTree-checkbox");
|
||
if($(item).attr("eletree-status")==="1"){
|
||
checkbox.addClass("eleTree-checkbox-checked");
|
||
checkbox.children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
|
||
}else if($(item).attr("eletree-status")==="0"){
|
||
checkbox.removeClass("eleTree-checkbox-checked");
|
||
checkbox.children("i").removeClass("layui-icon-ok eleTree-checkbox-line");
|
||
}else if($(item).attr("eletree-status")==="2"){
|
||
checkbox.addClass("eleTree-checkbox-checked");
|
||
checkbox.children("i").removeClass("layui-icon-ok").addClass("eleTree-checkbox-line");
|
||
}
|
||
|
||
})
|
||
},
|
||
// 通过dom节点找对应数据
|
||
reInitData: function(node) {
|
||
var options=this.config;
|
||
var i=node.index();
|
||
var floor=Number(node.attr("eletree-floor"));
|
||
var arr=[]; // 节点对应的index
|
||
while (floor>=0) {
|
||
arr.push(i);
|
||
floor=floor-1;
|
||
node=node.parents("[eletree-floor='"+floor+"']");
|
||
i=node.index();
|
||
}
|
||
arr=arr.reverse();
|
||
var oData=this.config.data;
|
||
// 当前节点的父节点数据
|
||
var parentData=oData[arr[0]];
|
||
// 当前节点的data数据
|
||
var d = oData[arr[0]];
|
||
for(var j = 1; j<arr.length; j++){
|
||
d = d[options.request.children]?d[options.request.children][arr[j]]:d;
|
||
}
|
||
for(var k = 1; k<arr.length-1; k++){
|
||
parentData = parentData[options.request.children]?parentData[options.request.children][arr[k]]:parentData;
|
||
}
|
||
|
||
return {
|
||
currentData: d,
|
||
parentData: {
|
||
data: parentData,
|
||
childIndex: arr[arr.length-1]
|
||
},
|
||
index: arr
|
||
}
|
||
},
|
||
// 通过key查找数据
|
||
keySearchToOpera: function(key,callback) {
|
||
var options=this.config;
|
||
var _self=this;
|
||
// 查找数据
|
||
var fn=function(data) {
|
||
var obj={
|
||
i: 0,
|
||
len: data.length
|
||
}
|
||
for(;obj.i<obj.len;obj.i++){
|
||
if(data[obj.i][options.request.key]!=key){
|
||
if(data[obj.i][options.request.children] && data[obj.i][options.request.children].length>0){
|
||
fn(data[obj.i][options.request.children]);
|
||
}
|
||
}else{
|
||
callback(data,obj);
|
||
}
|
||
}
|
||
}
|
||
fn(options.data);
|
||
},
|
||
updateKeyChildren: function(key,data) {
|
||
var options=this.config;
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var floor=Number(node.attr("eletree-floor"))+1;
|
||
var _self=this;
|
||
|
||
this.keySearchToOpera(key,function(d,obj) {
|
||
// 数据更新
|
||
d[obj.i][options.request.children]=data;
|
||
// dom更新
|
||
node.length!==0 && laytpl(TPL_ELEM(options,floor)).render(data, function(string){
|
||
$(node).children(".eleTree-node-group").empty().append(string);
|
||
options.defaultExpandAll && $(node).children(".eleTree-node-group").show();
|
||
});
|
||
_self.unCheckNodes(true);
|
||
_self.defaultChecked();
|
||
});
|
||
},
|
||
updateKeySelf: function(key,data) {
|
||
var options=this.config;
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']").children(".eleTree-node-content");
|
||
var floor=Number(node.attr("eletree-floor"))+1;
|
||
data[options.request.name] && node.children(".eleTree-node-content-label").text(data[options.request.name]);
|
||
data[options.request.disabled] && node.children(".eleTree-hideen").addClass("eleTree-disabled")
|
||
.siblings(".eleTree-checkbox").addClass("eleTree-checkbox-disabled");
|
||
// 数据更新
|
||
var getData=this.keySearchToOpera(key,function(d,obj) {
|
||
data[options.request.key]=d[obj.i][options.request.key];
|
||
data[options.request.children]=d[obj.i][options.request.children];
|
||
d[obj.i]=$.extend({},d[obj.i],data);
|
||
console.log(options.data);
|
||
});
|
||
},
|
||
remove: function(key) {
|
||
var options=this.config;
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var pElem=node.parent(".eleTree-node-group");
|
||
// 数据删除
|
||
this.keySearchToOpera(key,function(data,obj) {
|
||
data.splice(obj.i,1);
|
||
obj.i--;
|
||
obj.len--;
|
||
|
||
node.length!==0 && options.elem.find("[data-"+options.customKey+"='"+key+"']").remove();
|
||
if(pElem.children(".eleTree-node").length===0){
|
||
pElem.siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").css("color", "transparent");
|
||
}
|
||
});
|
||
this.unCheckNodes(true);
|
||
this.defaultChecked();
|
||
this.checkboxInit();
|
||
},
|
||
append: function(key,data) {
|
||
var options=this.config;
|
||
// 如果不传key，则直接添加到根节点
|
||
if(typeof key==="object" && key!==null){
|
||
data=key;
|
||
key=null;
|
||
}
|
||
if(key===null || key===""){
|
||
options.data.push(data);
|
||
laytpl(TPL_ELEM(options,0,"0")).render([data], function(string){
|
||
$(options.elem).append(string);
|
||
$(options.elem).children(".eleTree-node:last").show();
|
||
});
|
||
this.checkboxRender();
|
||
return;
|
||
}
|
||
// 传key则添加到子节点
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var floor=Number(node.attr("eletree-floor"))+1;
|
||
// 数据更新
|
||
this.keySearchToOpera(key,function(d,obj) {
|
||
if(d[obj.i][options.request.children]){
|
||
d[obj.i][options.request.children].push(data);
|
||
}else{
|
||
d[obj.i][options.request.children]=[data];
|
||
}
|
||
var arr=d[obj.i][options.request.children];
|
||
var icon=node.children(".eleTree-node-content").find(".eleTree-node-content-icon .layui-icon");
|
||
// 添加之后长度为1，则原来没有三角，添加三角
|
||
if(arr.length===1){
|
||
icon.removeAttr("style");
|
||
}
|
||
// 判断原来是否没有展开
|
||
if(!icon.hasClass("icon-rotate")){
|
||
var expandOnClickNode=options.expandOnClickNode?node.children(".eleTree-node-content"):node.children(".eleTree-node-content").children(".eleTree-node-content-icon");
|
||
expandOnClickNode.trigger("click");
|
||
}
|
||
// 判断节点是否已存在
|
||
var isExist=false;
|
||
node.children(".eleTree-node-group").children(".eleTree-node").each(function(index,item){
|
||
if(data[options.request.key]==$(item).data(options.request.key)){
|
||
isExist=true;
|
||
}
|
||
})
|
||
if(!isExist){
|
||
var len=arr.length;
|
||
var eletreeStatus=node.children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
|
||
eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
|
||
node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([arr[len-1]], function(string){
|
||
node.children(".eleTree-node-group").append(string).show();
|
||
});
|
||
}
|
||
|
||
});
|
||
this.checkboxRender();
|
||
},
|
||
insertBefore: function(key,data) {
|
||
var options=this.config;
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var floor=Number(node.attr("eletree-floor"));
|
||
// 数据更新
|
||
this.keySearchToOpera(key,function(d,obj) {
|
||
d.splice(obj.i,0,data);
|
||
obj.i++;
|
||
obj.len++;
|
||
var eletreeStatus=node.parent(".eleTree-node-group").length===0 ? "0" : node.parent(".eleTree-node-group").parent(".eleTree-node")
|
||
.children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
|
||
eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
|
||
node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([data], function(string){
|
||
node.before(string).prev(".eleTree-node");
|
||
});
|
||
});
|
||
this.checkboxRender();
|
||
},
|
||
insertAfter: function(key,data) {
|
||
var options=this.config;
|
||
var node=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var floor=Number(node.attr("eletree-floor"));
|
||
// 数据更新
|
||
this.keySearchToOpera(key,function(d,obj) {
|
||
d.splice(obj.i+1,0,data);
|
||
obj.i++;
|
||
obj.len++;
|
||
var eletreeStatus=node.parent(".eleTree-node-group").length===0 ? "0" : node.parent(".eleTree-node-group").parent(".eleTree-node")
|
||
.children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
|
||
eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
|
||
node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([data], function(string){
|
||
$(node).after(string).next(".eleTree-node");
|
||
});
|
||
});
|
||
this.checkboxRender();
|
||
// if(!options.lazy){
|
||
// if(!options.renderAfterExpand || options.defaultExpandAll || options.defaultExpandedKeys.length>0){
|
||
// this.initialExpandAll(options.data,[],1);
|
||
// }
|
||
// }
|
||
},
|
||
getChecked: function(leafOnly, includeHalfChecked) {
|
||
var options=this.config
|
||
,el
|
||
,arr=[];
|
||
leafOnly=leafOnly || false;
|
||
includeHalfChecked=includeHalfChecked || false;
|
||
if(leafOnly){
|
||
el=options.elem.find(".layui-icon.leaf-icon").parent(".eleTree-node-content-icon")
|
||
.siblings("input.eleTree-hideen[eletree-status='1']");
|
||
}else if(includeHalfChecked){
|
||
el=options.elem.find("input.eleTree-hideen[eletree-status='1'],input.eleTree-hideen[eletree-status='2']");
|
||
}else{
|
||
el=options.elem.find("input.eleTree-hideen[eletree-status='1']");
|
||
}
|
||
el.each(function(index,item) {
|
||
var obj={};
|
||
var id=$(item).parent(".eleTree-node-content").parent(".eleTree-node").data(options.request.key);
|
||
var label=$(item).siblings(".eleTree-node-content-label").text();
|
||
obj[options.request.key]=id;
|
||
obj[options.request.name]=label;
|
||
obj.elem=item;
|
||
obj.othis=$(item).siblings(".eleTree-checkbox").get(0)
|
||
arr.push(obj);
|
||
})
|
||
return arr;
|
||
},
|
||
setChecked: function(arr,isReset) {
|
||
var options=this.config;
|
||
isReset=isReset || false;
|
||
if(isReset){
|
||
this.unCheckNodes();
|
||
options.defaultCheckedKeys=$.extend([],arr);
|
||
}else{
|
||
this.unCheckNodes(true);
|
||
arr.forEach(function(val) {
|
||
if($.inArray(val,options.defaultCheckedKeys)===-1){
|
||
options.defaultCheckedKeys.push(val);
|
||
}
|
||
})
|
||
}
|
||
this.defaultChecked();
|
||
},
|
||
unCheckNodes: function(_internal) {
|
||
_internal=_internal || false; // _internal: 是否内部调用
|
||
var options=this.config;
|
||
options.elem.find("input.eleTree-hideen[eletree-status='1'],input.eleTree-hideen[eletree-status='2']").each(function(index,item) {
|
||
$(item).attr("eletree-status","0").prop("checked",false);
|
||
// 如果外部的取消选中，则所有的记录全部取消
|
||
if(!_internal){
|
||
$(item).removeAttr("data-checked");
|
||
}
|
||
});
|
||
this.checkboxRender();
|
||
},
|
||
unCheckArrNodes: function(arr) {
|
||
var options=this.config;
|
||
var dataChecked=[];
|
||
options.elem.find(".eleTree-hideen[eletree-status='1']").each(function(index,item) {
|
||
var id=$(item).parent(".eleTree-node-content").parent(".eleTree-node").data(options.request.key);
|
||
// 获取所有被选中项，并去除arr中包含的数据
|
||
if(arr.some(function(val) {
|
||
return val==id;
|
||
})){
|
||
// 如果id在arr数组中，则清除dom上面的checked数据
|
||
$(item).removeAttr("data-checked");
|
||
return;
|
||
}
|
||
dataChecked.push(id);
|
||
})
|
||
|
||
// 更新defaultCheckedKeys数据
|
||
for(var j=0;j<options.defaultCheckedKeys.length;j++){
|
||
if(!dataChecked.some(function(val) {
|
||
return val==options.defaultCheckedKeys[j];
|
||
})){
|
||
options.defaultCheckedKeys.splice(j,1);
|
||
j--;
|
||
}
|
||
}
|
||
this.unCheckNodes(true);
|
||
this.defaultChecked(dataChecked);
|
||
},
|
||
unExpandAll: function() {
|
||
var options=this.config;
|
||
options.elem.find(".layui-icon.icon-rotate").removeClass("icon-rotate")
|
||
.parent(".eleTree-node-content-icon").parent(".eleTree-node-content")
|
||
.siblings(".eleTree-node-group").hide();
|
||
},
|
||
// 方法展开所有节点
|
||
expandAll: function() {
|
||
var options=this.config;
|
||
if(this.isRenderAllDom){
|
||
return void options.elem.find(".eleTree-node-content-icon>.layui-icon").addClass("icon-rotate")
|
||
.parent(".eleTree-node-content-icon").parent(".eleTree-node-content")
|
||
.siblings(".eleTree-node-group").show();
|
||
}
|
||
options.elem.children(".eleTree-node").children(".eleTree-node-group").empty();
|
||
this.initialExpandAll(options.data,[],1,true);
|
||
this.unCheckNodes(true);
|
||
this.defaultChecked();
|
||
this.checkboxInit();
|
||
},
|
||
// 展开某节点的所有子节点
|
||
expandNode: function(key) {
|
||
var options=this.config;
|
||
var parentsEl=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var isExpand=parentsEl.children(".eleTree-node-content").find(".eleTree-node-content-icon>.layui-icon.layui-icon-triangle-r").hasClass("icon-rotate");
|
||
var parentGroup=parentsEl.find(".eleTree-node-group");
|
||
// 判断是否已经展开
|
||
if(isExpand) return false;
|
||
// 判断子节点是否已经渲染(目前只判断所有子节点是否已经全部渲染，而不是当前子节点是否全部渲染)
|
||
if(this.isRenderAllDom){
|
||
parentGroup.show("fast");
|
||
parentsEl.find(".layui-icon.layui-icon-triangle-r").addClass("icon-rotate");
|
||
return false;
|
||
}
|
||
if(options.lazy) return hint.error("展开所有子节点方法暂不支持懒加载");
|
||
|
||
var data=this.reInitData(parentsEl);
|
||
var d=data.currentData;
|
||
var floor=Number(parentsEl.attr("eletree-floor"))+1;
|
||
var fn=function(data,arr,floor) {
|
||
data.forEach(function(val,index) {
|
||
arr.push(index);
|
||
if(val[options.request.children] && val[options.request.children].length>0){
|
||
var el=parentsEl.children(".eleTree-node-group");
|
||
for(var i=1;i<arr.length;i++){
|
||
el=el.children(".eleTree-node").eq(arr[i]).children(".eleTree-node-group");
|
||
}
|
||
laytpl(TPL_ELEM(options,floor)).render(val[options.request.children], function(string){
|
||
el.html(string);
|
||
el.show().siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
|
||
});
|
||
floor++;
|
||
fn(val[options.request.children],arr,floor);
|
||
floor--;
|
||
}
|
||
// 重置数组索引
|
||
arr.pop();
|
||
})
|
||
}
|
||
fn([d],[],floor);
|
||
this.unCheckNodes(true);
|
||
this.defaultChecked();
|
||
this.checkboxInit();
|
||
},
|
||
// 合并某节点的所有子节点
|
||
unExpandNode: function(key) {
|
||
var options=this.config;
|
||
var parentsEl=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var isExpand=parentsEl.children(".eleTree-node-content").find(".eleTree-node-content-icon>.layui-icon.layui-icon-triangle-r").hasClass("icon-rotate");
|
||
// 判断是否已经合并
|
||
if(!isExpand) return false;
|
||
parentsEl.find(".eleTree-node-group").hide("fast");
|
||
parentsEl.find(".layui-icon.layui-icon-triangle-r").removeClass("icon-rotate");
|
||
},
|
||
// 切换某节点的所有子节点的展开合并状态
|
||
toggleExpandNode: function(key) {
|
||
var options=this.config;
|
||
var parentsEl=options.elem.find("[data-"+options.customKey+"='"+key+"']");
|
||
var isExpand=parentsEl.children(".eleTree-node-content").find(".eleTree-node-content-icon>.layui-icon.layui-icon-triangle-r").hasClass("icon-rotate");
|
||
if(isExpand){
|
||
this.unExpandNode(key);
|
||
}else{
|
||
this.expandNode(key);
|
||
}
|
||
},
|
||
// 节点事件
|
||
nodeEvent: function() {
|
||
var _self=this;
|
||
var options=this.config;
|
||
// 节点被点击的回调事件
|
||
options.elem.on("click",".eleTree-node-content",function(e) {
|
||
var eleNode=$(this).parent(".eleTree-node");
|
||
var eleTreeNodeContent=eleNode.children(".eleTree-node-content");
|
||
// 添加active背景
|
||
if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
|
||
if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
|
||
_self.prevClickEle=eleTreeNodeContent;
|
||
|
||
$("#tree-menu").hide().remove();
|
||
layui.event.call(eleNode, MOD_NAME, 'nodeClick('+ _self.filter +')', {
|
||
node: eleNode,
|
||
data: _self.reInitData(eleNode),
|
||
event: e
|
||
});
|
||
})
|
||
// 节点右键的回调事件
|
||
options.elem.on("contextmenu",".eleTree-node-content",function(e) {
|
||
var eleNode=$(this).parent(".eleTree-node");
|
||
layui.event.call(eleNode, MOD_NAME, 'nodeContextmenu('+ _self.filter +')', {
|
||
node: eleNode,
|
||
data: _self.reInitData(eleNode),
|
||
event: e
|
||
});
|
||
})
|
||
// 节点被拖拽的回调事件
|
||
options.draggable && options.elem.on("mousedown",".eleTree-node-content",function(e) {
|
||
var time=0;
|
||
var eleNode=$(this).parent(".eleTree-node");
|
||
var eleFloor=Number(eleNode.attr("eletree-floor"));
|
||
var groupNode=eleNode.parent(".eleTree-node-group");
|
||
|
||
e.stopPropagation();
|
||
options.elem.css("user-select","none");
|
||
var cloneNode=eleNode.clone(true);
|
||
var temNode=eleNode.clone(true);
|
||
|
||
var x=e.clientX-options.elem.offset().left;
|
||
var y=e.clientY-options.elem.offset().top;
|
||
options.elem.append(cloneNode);
|
||
cloneNode.css({
|
||
"display": "none",
|
||
"opacity": 0.7,
|
||
"position": "absolute",
|
||
"background-color": "#f5f5f5",
|
||
"width": "100%"
|
||
})
|
||
|
||
var currentData=_self.reInitData(eleNode);
|
||
|
||
var isStop=false;
|
||
|
||
$(document).on("mousemove",function(e) {
|
||
// t为了区别click事件
|
||
time++;
|
||
if(time>2){
|
||
var xx=e.clientX-options.elem.offset().left+10;
|
||
var yy=e.clientY-options.elem.offset().top+$(document).scrollTop()-5; // 加上浏览器滚动高度
|
||
|
||
cloneNode.css({
|
||
display: "block",
|
||
left: xx+"px",
|
||
top: yy+"px"
|
||
})
|
||
}
|
||
}).on("mouseup",function(e) {
|
||
$(document).off("mousemove").off("mouseup");
|
||
var target=$(e.target).parents(".eleTree-node").eq(0);
|
||
cloneNode.remove();
|
||
options.elem.css("user-select","auto");
|
||
|
||
|
||
// 当前点击的是否时最外层
|
||
var isCurrentOuterMost=eleNode.parent().get(0).isEqualNode(options.elem.get(0))
|
||
// 目标是否时最外层
|
||
var isTargetOuterMost=$(e.target).get(0).isEqualNode(options.elem.get(0))
|
||
if(isTargetOuterMost){
|
||
target=options.elem;
|
||
}
|
||
// 判断是否超出边界
|
||
if(target.parents(options.elem).length===0 && !isTargetOuterMost){
|
||
return;
|
||
}
|
||
// 判断初始与结束是否是同一个节点
|
||
if(target.get(0).isEqualNode(eleNode.get(0))){
|
||
return;
|
||
}
|
||
// 判断是否是父节点放到子节点
|
||
var tFloor=target.attr("eletree-floor");
|
||
var isInChild=false;
|
||
eleNode.find("[eletree-floor='"+tFloor+"']").each(function() {
|
||
if(this.isEqualNode(target.get(0))){
|
||
isInChild=true;
|
||
}
|
||
})
|
||
if(isInChild){
|
||
return;
|
||
}
|
||
|
||
var targetData=_self.reInitData(target);
|
||
layui.event.call(target, MOD_NAME, 'nodeDrag('+ _self.filter +')', {
|
||
current: {
|
||
node: eleNode,
|
||
data: currentData
|
||
},
|
||
target: {
|
||
node: target,
|
||
data: targetData
|
||
},
|
||
stop: function() {
|
||
isStop=true;
|
||
}
|
||
});
|
||
// 拖拽是否取消
|
||
if(isStop){
|
||
return false;
|
||
}
|
||
|
||
// 数据更改
|
||
var currList=currentData.parentData.data[options.request.children]
|
||
var currIndex=currentData.parentData.childIndex
|
||
var currData=currentData.currentData;
|
||
var tarData=targetData.currentData;
|
||
// 当前是否是最外层
|
||
isCurrentOuterMost ? options.data.splice(currIndex,1) : currList.splice(currIndex,1)
|
||
// 目标是否是最外层
|
||
isTargetOuterMost ? options.data.push(currData) : (function() {
|
||
!tarData[options.request.children] ? tarData[options.request.children]=[] : "";
|
||
tarData[options.request.children].push(currData);
|
||
})()
|
||
|
||
// dom互换
|
||
eleNode.remove();
|
||
var floor=null;
|
||
// 最外层判断
|
||
if(isTargetOuterMost){
|
||
target.append(temNode);
|
||
floor=0;
|
||
}else{
|
||
target.children(".eleTree-node-group").append(temNode);
|
||
floor=Number(target.attr("eletree-floor"))+1;
|
||
}
|
||
// 加floor和padding
|
||
temNode.attr("eletree-floor",String(floor));
|
||
temNode.children(".eleTree-node-content").css("padding-left",floor*options.indent+"px");
|
||
// 计算线条的left
|
||
if(options.showLine){
|
||
// 判断目标是否是最外层，是的话隐藏线条
|
||
if(floor===0){
|
||
temNode.children(".eleTree-node-verticalline,.eleTree-node-horizontalline").hide();
|
||
}else{
|
||
temNode.children(".eleTree-node-verticalline,.eleTree-node-horizontalline").css("left",options.indent*(floor-1)+9+"px").show();
|
||
}
|
||
}
|
||
// 通过floor差值计算子元素的floor
|
||
var countFloor=eleFloor-floor;
|
||
temNode.find(".eleTree-node").each(function(index,item) {
|
||
var f=Number($(item).attr("eletree-floor"))-countFloor;
|
||
$(item).attr("eletree-floor",String(f));
|
||
$(item).children(".eleTree-node-content").css("padding-left",f*options.indent+"px");
|
||
options.showLine && $(item).children(".eleTree-node-verticalline,.eleTree-node-horizontalline").css("left",options.indent*(f-1)+9+"px").show();
|
||
})
|
||
// 原dom去三角
|
||
var leaf=groupNode.children(".eleTree-node").length===0;
|
||
leaf && groupNode.siblings(".eleTree-node-content")
|
||
.children(".eleTree-node-content-icon").children(".layui-icon")
|
||
.removeClass("icon-rotate").css("color","transparent");
|
||
// 当前的增加三角
|
||
var cLeaf=target.children(".eleTree-node-group").children(".eleTree-node").length===1;
|
||
cLeaf && target.children(".eleTree-node-content")
|
||
.children(".eleTree-node-content-icon").children(".layui-icon")
|
||
.addClass("icon-rotate").removeAttr("style");
|
||
// 判断当前是否需要显示
|
||
var isShowNode=target.children(".eleTree-node-content").find(".layui-icon").hasClass("icon-rotate");
|
||
(isTargetOuterMost || isShowNode) && target.children(".eleTree-node-group").show();
|
||
|
||
_self.unCheckNodes(true);
|
||
_self.defaultChecked();
|
||
_self.checkboxInit();
|
||
})
|
||
})
|
||
},
|
||
rightClickMenu: function() {
|
||
var _self=this;
|
||
var options=this.config;
|
||
if(options.contextmenuList.length<=0){
|
||
return;
|
||
}
|
||
$(document).on("click",function() {
|
||
$("#tree-menu").hide().remove();
|
||
});
|
||
|
||
var customizeMenu=[]; // 用户自定义的
|
||
var internalMenu=["copy","add","add.async","insertBefore","insertAfter","append","edit","edit.async","remove","remove.async"]; // 系统自带的
|
||
var customizeStr='';
|
||
options.contextmenuList.forEach(function(val) {
|
||
if($.inArray(val,internalMenu)===-1){
|
||
customizeMenu.push(val);
|
||
customizeStr+='<li class="'+(val.eventName || val)+'"><a href="javascript:;">'+(val.text || val)+'</a></li>';
|
||
}
|
||
})
|
||
var menuStr=['<ul id="tree-menu">'
|
||
,$.inArray("copy",options.contextmenuList)!==-1?'<li class="copy"><a href="javascript:;">复制</a></li>':''
|
||
,($.inArray("add",options.contextmenuList)!==-1 || $.inArray("add.async",options.contextmenuList)!==-1)?'<li class="add"><a href="javascript:;">新增</a></li>'+
|
||
'<li class="insertBefore"><a href="javascript:;">插入节点前</a></li>'+
|
||
'<li class="insertAfter"><a href="javascript:;">插入节点后</a></li>'+
|
||
'<li class="append"><a href="javascript:;">插入子节点</a></li>' : ""
|
||
,($.inArray("edit",options.contextmenuList)!==-1 || $.inArray("edit.async",options.contextmenuList)!==-1)?'<li class="edit"><a href="javascript:;">修改</a></li>':''
|
||
,($.inArray("remove",options.contextmenuList)!==-1 || $.inArray("remove.async",options.contextmenuList)!==-1)?'<li class="remove"><a href="javascript:;">删除</a></li>':''
|
||
,customizeStr
|
||
,'</ul>'].join("");
|
||
this.treeMenu=$(menuStr);
|
||
options.elem.off("contextmenu").on("contextmenu",".eleTree-node-content",function(e) {
|
||
var that=this;
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
// 添加active背景
|
||
if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
|
||
$(this).addClass("eleTree-node-content-active");
|
||
var eleNode=$(this).parent(".eleTree-node");
|
||
var nodeData=_self.reInitData(eleNode);
|
||
|
||
// 菜单位置
|
||
$(document.body).after(_self.treeMenu);
|
||
$("#tree-menu").find("li.append,li.insertAfter,li.insertBefore").hide();
|
||
$("#tree-menu").find(":not(li.append,li.insertAfter,li.insertBefore)").show();
|
||
$("#tree-menu").css({
|
||
left: e.clientX+$(document).scrollLeft(),
|
||
top: e.clientY+$(document).scrollTop()
|
||
}).show();
|
||
// 复制
|
||
$("#tree-menu li.copy").off().on("click",function() {
|
||
var el = $(that).children(".eleTree-node-content-label").get(0);
|
||
var selection = window.getSelection();
|
||
var range = document.createRange();
|
||
range.selectNodeContents(el);
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
document.execCommand('Copy', 'false', null);
|
||
selection.removeAllRanges();
|
||
});
|
||
// 新增
|
||
$("#tree-menu li.add").off().on("click",function(e) {
|
||
e.stopPropagation();
|
||
$(this).hide().siblings("li:not(.append,.insertAfter,.insertBefore)").hide();
|
||
$(this).siblings(".append,li.insertAfter,li.insertBefore").show();
|
||
})
|
||
// 添加的默认数据
|
||
var obj={};
|
||
obj[options.request.key]=Date.now();
|
||
obj[options.request.name]="未命名"+_self.nameIndex;
|
||
if(options.lazy){
|
||
obj[options.request.isLeaf]=true;
|
||
}
|
||
|
||
var arr=["Append","InsertBefore","InsertAfter"];
|
||
arr.forEach(function(val) {
|
||
var s=val[0].toLocaleLowerCase()+val.slice(1,val.length);
|
||
$("#tree-menu li."+s).off().on("click",function(e) {
|
||
var node=$(that).parent(".eleTree-node");
|
||
var key=node.data(options.request.key);
|
||
var isStop=false;
|
||
var s=val[0].toLocaleLowerCase()+val.slice(1,val.length);
|
||
// 每次只能添加一条数据，不可以批量添加
|
||
_self[s](key,obj);
|
||
var nodeArr=[];
|
||
node.children(".eleTree-node-group").children(".eleTree-node").each(function(i,itemNode) {
|
||
nodeArr.push(itemNode);
|
||
})
|
||
node.siblings(".eleTree-node").each(function(i,itemNode) {
|
||
nodeArr.push(itemNode);
|
||
})
|
||
$.each(nodeArr, function(i,itemNode) {
|
||
if(obj[options.request.key]===$(itemNode).data(options.request.key)){
|
||
var label=$(itemNode).children(".eleTree-node-content").children(".eleTree-node-content-label").hide();
|
||
var text=label.text();
|
||
var inp="<input type='text' value='"+obj[options.request.name]+"' class='eleTree-node-content-input' />";
|
||
label.after(inp);
|
||
|
||
label.siblings(".eleTree-node-content-input").focus().select().off().on("blur",function() {
|
||
var v=$(this).val();
|
||
obj[options.request.name]=v;
|
||
var inpThis=this;
|
||
|
||
layui.event.call(node, MOD_NAME, 'node'+val+'('+ _self.filter +')', {
|
||
node: node,
|
||
data: nodeData.currentData,
|
||
newData: obj,
|
||
// 重新设置数据
|
||
setData: function(o) {
|
||
// obj[options.request.key]=Date.now();
|
||
obj[options.request.name]=v;
|
||
if(options.lazy){
|
||
obj[options.request.isLeaf]=true;
|
||
}
|
||
var newObj=$.extend({},obj,o);
|
||
this.newData=newObj;
|
||
// 修改数据
|
||
var d=_self.reInitData($(itemNode)).currentData;
|
||
d[options.request.name]=newObj[options.request.name];
|
||
d[options.request.key]=newObj[options.request.key];
|
||
// 修改dom
|
||
$(inpThis).siblings(".eleTree-node-content-label").text(newObj[options.request.name]).show();
|
||
$(itemNode).attr("data-"+options.customKey,newObj[options.request.key]); // 改变页面上面的显示的key，之后可以获取dom
|
||
$(itemNode).data(options.request.key,newObj[options.request.key]); // 改变data数据，之后可以通过data获取key
|
||
$(inpThis).remove();
|
||
|
||
_self.nameIndex++;
|
||
isStop=true;
|
||
},
|
||
// 停止添加
|
||
stop: function() {
|
||
isStop=true;
|
||
this.newData={};
|
||
_self.remove(obj[options.request.key]);
|
||
}
|
||
});
|
||
|
||
// 不是异步添加
|
||
if($.inArray("add.async",options.contextmenuList)===-1){
|
||
if(isStop) return;
|
||
// 修改数据
|
||
_self.reInitData($(itemNode)).currentData[options.request.name]=v;
|
||
// 修改dom
|
||
$(this).siblings(".eleTree-node-content-label").text(v).show();
|
||
$(this).remove();
|
||
|
||
_self.nameIndex++;
|
||
}
|
||
}).on("mousedown",function(e) {
|
||
// 防止input拖拽
|
||
e.stopPropagation();
|
||
}).on("click",function(e) {
|
||
e.stopPropagation();
|
||
})
|
||
}
|
||
})
|
||
})
|
||
})
|
||
|
||
// 编辑
|
||
$("#tree-menu li.edit").off().on("click",function(e) {
|
||
e.stopPropagation();
|
||
$("#tree-menu").hide().remove();
|
||
var node=$(that).parent(".eleTree-node");
|
||
var key=node.data(options.request.key);
|
||
var label=$(that).children(".eleTree-node-content-label").hide();
|
||
var text=label.text();
|
||
var inp="<input type='text' value='"+text+"' class='eleTree-node-content-input' />";
|
||
label.after(inp);
|
||
label.siblings(".eleTree-node-content-input").focus().select().off().on("blur",function() {
|
||
var val=$(this).val();
|
||
var isStop=false;
|
||
var inpThis=this;
|
||
layui.event.call(node, MOD_NAME, 'nodeEdit('+ _self.filter +')', {
|
||
node: node,
|
||
value: val,
|
||
data: nodeData.currentData,
|
||
// 停止添加
|
||
stop: function() {
|
||
isStop=true;
|
||
$(inpThis).siblings(".eleTree-node-content-label").show();
|
||
$(inpThis).remove();
|
||
},
|
||
async: function() {
|
||
if(isStop) return;
|
||
// 修改数据
|
||
_self.reInitData(eleNode).currentData[options.request.name]=val;
|
||
// 修改dom
|
||
$(inpThis).siblings(".eleTree-node-content-label").text(val).show();
|
||
$(inpThis).remove();
|
||
}
|
||
});
|
||
// 不是异步
|
||
if($.inArray("edit.async",options.contextmenuList)===-1){
|
||
if(isStop) return;
|
||
// 修改数据
|
||
_self.reInitData(eleNode).currentData[options.request.name]=val;
|
||
// 修改dom
|
||
$(this).siblings(".eleTree-node-content-label").text(val).show();
|
||
$(this).remove();
|
||
}
|
||
|
||
}).on("mousedown",function(e) {
|
||
// 防止input拖拽
|
||
e.stopPropagation();
|
||
})
|
||
})
|
||
// 删除
|
||
$("#tree-menu li.remove").off().on("click",function(e) {
|
||
var node=$(that).parent(".eleTree-node");
|
||
var key=node.data(options.request.key);
|
||
var isStop=false;
|
||
layui.event.call(node, MOD_NAME, 'nodeRemove('+ _self.filter +')', {
|
||
node: node,
|
||
data: nodeData.currentData,
|
||
// 停止添加
|
||
stop: function() {
|
||
isStop=true;
|
||
return this;
|
||
},
|
||
async: function() {
|
||
if(isStop) return;
|
||
_self.remove(key);
|
||
return this;
|
||
}
|
||
});
|
||
// 不是异步
|
||
if($.inArray("remove.async",options.contextmenuList)===-1){
|
||
if(isStop) return;
|
||
_self.remove(key);
|
||
}
|
||
|
||
})
|
||
|
||
// 自定义菜单回调
|
||
customizeMenu.forEach(function(val) {
|
||
var text=val.eventName || val;
|
||
$("#tree-menu li."+text).off().on("click",function() {
|
||
var node=$(that).parent(".eleTree-node");
|
||
var isStop=false;
|
||
layui.event.call(node, MOD_NAME, 'node'+text.replace(text.charAt(0),text.charAt(0).toUpperCase())+'('+ _self.filter +')', {
|
||
node: node,
|
||
data: nodeData.currentData,
|
||
});
|
||
});
|
||
})
|
||
|
||
_self.prevClickEle=$(this);
|
||
})
|
||
},
|
||
search: function(value) {
|
||
var options=this.config;
|
||
if(!options.searchNodeMethod || typeof options.searchNodeMethod !== "function"){
|
||
return;
|
||
}
|
||
var data=options.data;
|
||
// 数据递归
|
||
var traverse=function(data) {
|
||
data.forEach(function(val,index) {
|
||
// 所有查找到的节点增加属性
|
||
val.visible=options.searchNodeMethod(value,val);
|
||
if(val[options.request.children] && val[options.request.children].length>0){
|
||
traverse(val[options.request.children]);
|
||
}
|
||
//如果当前节点属性为隐藏，判断其子节点是否有显示的，如果有，则当前节点改为显示
|
||
if(!val.visible){
|
||
var childSomeShow = false;
|
||
if(val[options.request.children] && val[options.request.children].length>0){
|
||
childSomeShow=val[options.request.children].some(function(v,i) {
|
||
return v.visible;
|
||
})
|
||
}
|
||
val.visible = childSomeShow;
|
||
}
|
||
// 通过节点的属性，显示隐藏各个节点，并添加删除搜索类
|
||
var el=options.elem.find("[data-"+options.customKey+"='"+val[options.request.key]+"']");
|
||
if(val.visible){
|
||
el.removeClass("eleTree-search-hide");
|
||
// 判断父节点是否展开，如果父节点没有展开，则子节点也不要显示
|
||
var parentEl=el.parent(".eleTree-node-group").parent(".eleTree-node");
|
||
var isParentOpen=parentEl.children(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon.layui-icon-triangle-r").hasClass("icon-rotate")
|
||
if((parentEl.length>0 && isParentOpen) || parentEl.length===0){
|
||
el.show();
|
||
}
|
||
}else{
|
||
el.hide().addClass("eleTree-search-hide");
|
||
}
|
||
// 删除子层属性
|
||
// if(val[options.request.children] && val[options.request.children].length>0){
|
||
// val[options.request.children].forEach(function(v,i) {
|
||
// delete v.visible;
|
||
// })
|
||
// }
|
||
})
|
||
}
|
||
traverse(data);
|
||
// 删除最外层属性
|
||
var arr=data.map(function (val) {
|
||
var v=val.visible;
|
||
// delete val.visible;
|
||
return v;
|
||
});
|
||
var isNotext=options.elem.children(".eleTree-noText");
|
||
// 如果第一层的所有的都隐藏，则显示文本
|
||
if(arr.every(function(v) {
|
||
return v===false;
|
||
})){
|
||
if(isNotext.length===0){
|
||
laytpl(TPL_NoText()).render(options, function(string){
|
||
options.elem.append(string);
|
||
});
|
||
}
|
||
}else{
|
||
isNotext.remove();
|
||
}
|
||
},
|
||
getAllNodeData: function() {
|
||
var options=this.config;
|
||
return options.data;
|
||
}
|
||
}
|
||
|
||
exports(MOD_NAME,eleTree);
|
||
})
|