mirror of https://github.com/layui/layui
优化 tree 代码书写规范
贤心
parent
1ac8bba068
commit
db67b7a9c3
|
|
@ -5,71 +5,84 @@
|
|||
layui.define('form', function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$
|
||||
,form = layui.form
|
||||
,layer = layui.layer
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 模块名
|
||||
,MOD_NAME = 'tree'
|
||||
var MOD_NAME = 'tree';
|
||||
|
||||
// 外部接口
|
||||
,tree = {
|
||||
config: {}
|
||||
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
|
||||
var tree = {
|
||||
config: {},
|
||||
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
|
||||
|
||||
// 设置全局项
|
||||
,set: function(options){
|
||||
set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
},
|
||||
|
||||
// 事件
|
||||
,on: function(events, callback){
|
||||
on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 操作当前实例
|
||||
,thisModule = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,id = options.id || that.index;
|
||||
var thisModule = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var id = options.id || that.index;
|
||||
|
||||
thisModule.that[id] = that; // 记录当前实例对象
|
||||
thisModule.config[id] = options; // 记录当前实例配置项
|
||||
|
||||
return {
|
||||
config: options
|
||||
config: options,
|
||||
// 重置实例
|
||||
,reload: function(options){
|
||||
reload: function(options){
|
||||
that.reload.call(that, options);
|
||||
}
|
||||
,getChecked: function(){
|
||||
},
|
||||
getChecked: function(){
|
||||
return that.getChecked.call(that);
|
||||
}
|
||||
,setChecked: function(id){//设置值
|
||||
},
|
||||
setChecked: function(id){// 设置值
|
||||
return that.setChecked.call(that, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前实例配置项
|
||||
,getThisModuleConfig = function(id){
|
||||
var getThisModuleConfig = function(id){
|
||||
var config = thisModule.config[id];
|
||||
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
|
||||
return config || null;
|
||||
}
|
||||
|
||||
// 字符常量
|
||||
,SHOW = 'layui-show', HIDE = 'layui-hide', NONE = 'layui-none', DISABLED = 'layui-disabled'
|
||||
var SHOW = 'layui-show';
|
||||
var HIDE = 'layui-hide';
|
||||
var NONE = 'layui-none';
|
||||
var DISABLED = 'layui-disabled';
|
||||
|
||||
,ELEM_VIEW = 'layui-tree', ELEM_SET = 'layui-tree-set', ICON_CLICK = 'layui-tree-iconClick'
|
||||
,ICON_ADD = 'layui-icon-addition', ICON_SUB = 'layui-icon-subtraction', ELEM_ENTRY = 'layui-tree-entry', ELEM_MAIN = 'layui-tree-main', ELEM_TEXT = 'layui-tree-txt', ELEM_PACK = 'layui-tree-pack', ELEM_SPREAD = 'layui-tree-spread'
|
||||
,ELEM_LINE_SHORT = 'layui-tree-setLineShort', ELEM_SHOW = 'layui-tree-showLine', ELEM_EXTEND = 'layui-tree-lineExtend'
|
||||
var ELEM_VIEW = 'layui-tree';
|
||||
var ELEM_SET = 'layui-tree-set';
|
||||
var ICON_CLICK = 'layui-tree-iconClick';
|
||||
var ICON_ADD = 'layui-icon-addition';
|
||||
var ICON_SUB = 'layui-icon-subtraction';
|
||||
var ELEM_ENTRY = 'layui-tree-entry';
|
||||
var ELEM_MAIN = 'layui-tree-main';
|
||||
var ELEM_TEXT = 'layui-tree-txt';
|
||||
var ELEM_PACK = 'layui-tree-pack';
|
||||
var ELEM_SPREAD = 'layui-tree-spread';
|
||||
var ELEM_LINE_SHORT = 'layui-tree-setLineShort';
|
||||
var ELEM_SHOW = 'layui-tree-showLine';
|
||||
var ELEM_EXTEND = 'layui-tree-lineExtend';
|
||||
|
||||
// 构造器
|
||||
,Class = function(options){
|
||||
var Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++tree.index;
|
||||
that.config = $.extend({}, that.config, tree.config, options);
|
||||
|
|
@ -78,18 +91,18 @@ layui.define('form', function(exports){
|
|||
|
||||
// 默认配置
|
||||
Class.prototype.config = {
|
||||
data: [] //数据
|
||||
data: [], // 数据
|
||||
|
||||
,showCheckbox: false //是否显示复选框
|
||||
,showLine: true //是否开启连接线
|
||||
,accordion: false //是否开启手风琴模式
|
||||
,onlyIconControl: false //是否仅允许节点左侧图标控制展开收缩
|
||||
,isJump: false //是否允许点击节点时弹出新窗口跳转
|
||||
,edit: false //是否开启节点的操作图标
|
||||
showCheckbox: false, // 是否显示复选框
|
||||
showLine: true, // 是否开启连接线
|
||||
accordion: false, // 是否开启手风琴模式
|
||||
onlyIconControl: false, // 是否仅允许节点左侧图标控制展开收缩
|
||||
isJump: false, // 是否允许点击节点时弹出新窗口跳转
|
||||
edit: false, // 是否开启节点的操作图标
|
||||
|
||||
,text: {
|
||||
defaultNodeName: '未命名' //节点默认名称
|
||||
,none: '无数据' //数据为空时的文本提示
|
||||
text: {
|
||||
defaultNodeName: '未命名', // 节点默认名称
|
||||
none: '无数据' // 数据为空时的文本提示
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -107,8 +120,8 @@ layui.define('form', function(exports){
|
|||
|
||||
// 主体渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
that.checkids = [];
|
||||
|
||||
|
|
@ -163,15 +176,15 @@ layui.define('form', function(exports){
|
|||
|
||||
// 节点解析
|
||||
Class.prototype.tree = function(elem, children){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,data = children || options.data;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var data = children || options.data;
|
||||
|
||||
// 遍历数据
|
||||
layui.each(data, function(index, item){
|
||||
var hasChild = item.children && item.children.length > 0
|
||||
,packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>')
|
||||
,entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">'
|
||||
var hasChild = item.children && item.children.length > 0;
|
||||
var packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>');
|
||||
var entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">'
|
||||
,'<div class="layui-tree-entry">'
|
||||
,'<div class="layui-tree-main">'
|
||||
// 箭头
|
||||
|
|
@ -260,14 +273,14 @@ layui.define('form', function(exports){
|
|||
|
||||
// 展开节点
|
||||
Class.prototype.spread = function(elem, item){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,entry = elem.children('.'+ELEM_ENTRY)
|
||||
,elemMain = entry.children('.'+ ELEM_MAIN)
|
||||
,elemIcon = entry.find('.'+ ICON_CLICK)
|
||||
,elemText = entry.find('.'+ ELEM_TEXT)
|
||||
,touchOpen = options.onlyIconControl ? elemIcon : elemMain //判断展开通过节点还是箭头图标
|
||||
,state = '';
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var entry = elem.children('.'+ELEM_ENTRY);
|
||||
var elemMain = entry.children('.'+ ELEM_MAIN);
|
||||
var elemIcon = entry.find('.'+ ICON_CLICK);
|
||||
var elemText = entry.find('.'+ ELEM_TEXT);
|
||||
var touchOpen = options.onlyIconControl ? elemIcon : elemMain; // 判断展开通过节点还是箭头图标
|
||||
var state = '';
|
||||
|
||||
// 展开收缩
|
||||
touchOpen.on('click', function(e){
|
||||
|
|
@ -323,9 +336,9 @@ layui.define('form', function(exports){
|
|||
|
||||
// 计算复选框选中状态
|
||||
Class.prototype.setCheckbox = function(elem, item, elemCheckbox){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,checked = elemCheckbox.prop('checked');
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var checked = elemCheckbox.prop('checked');
|
||||
|
||||
if(elemCheckbox.prop('disabled')) return;
|
||||
|
||||
|
|
@ -343,10 +356,10 @@ layui.define('form', function(exports){
|
|||
// 若无父节点，则终止递归
|
||||
if(!thisNodeElem.parents('.'+ ELEM_SET)[0]) return;
|
||||
|
||||
var state
|
||||
,parentPack = thisNodeElem.parent('.'+ ELEM_PACK)
|
||||
,parentNodeElem = parentPack.parent()
|
||||
,parentCheckbox = parentPack.prev().find('input[same="layuiTreeCheck"]');
|
||||
var state;
|
||||
var parentPack = thisNodeElem.parent('.'+ ELEM_PACK);
|
||||
var parentNodeElem = parentPack.parent();
|
||||
var parentCheckbox = parentPack.prev().find('input[same="layuiTreeCheck"]');
|
||||
|
||||
// 如果子节点有任意一条选中，则父节点为选中状态
|
||||
if(checked){
|
||||
|
|
@ -373,10 +386,10 @@ layui.define('form', function(exports){
|
|||
|
||||
// 复选框选择
|
||||
Class.prototype.checkClick = function(elem, item){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,entry = elem.children('.'+ ELEM_ENTRY)
|
||||
,elemMain = entry.children('.'+ ELEM_MAIN);
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var entry = elem.children('.'+ ELEM_ENTRY);
|
||||
var elemMain = entry.children('.'+ ELEM_MAIN);
|
||||
|
||||
|
||||
|
||||
|
|
@ -384,8 +397,8 @@ layui.define('form', function(exports){
|
|||
elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){
|
||||
layui.stope(e); // 阻止点击节点事件
|
||||
|
||||
var elemCheckbox = $(this).prev()
|
||||
,checked = elemCheckbox.prop('checked');
|
||||
var elemCheckbox = $(this).prev();
|
||||
var checked = elemCheckbox.prop('checked');
|
||||
|
||||
if(elemCheckbox.prop('disabled')) return;
|
||||
|
||||
|
|
@ -393,29 +406,29 @@ layui.define('form', function(exports){
|
|||
|
||||
// 复选框点击产生的回调
|
||||
options.oncheck && options.oncheck({
|
||||
elem: elem
|
||||
,checked: checked
|
||||
,data: item
|
||||
elem: elem,
|
||||
checked: checked,
|
||||
data: item
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 节点操作
|
||||
Class.prototype.operate = function(elem, item){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,entry = elem.children('.'+ ELEM_ENTRY)
|
||||
,elemMain = entry.children('.'+ ELEM_MAIN);
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var entry = elem.children('.'+ ELEM_ENTRY);
|
||||
var elemMain = entry.children('.'+ ELEM_MAIN);
|
||||
|
||||
entry.children('.layui-tree-btnGroup').on('click', '.layui-icon', function(e){
|
||||
layui.stope(e); // 阻止节点操作
|
||||
|
||||
var type = $(this).data("type")
|
||||
,packCont = elem.children('.'+ELEM_PACK)
|
||||
,returnObj = {
|
||||
data: item
|
||||
,type: type
|
||||
,elem:elem
|
||||
var type = $(this).data("type");
|
||||
var packCont = elem.children('.'+ELEM_PACK);
|
||||
var returnObj = {
|
||||
data: item,
|
||||
type: type,
|
||||
elem:elem
|
||||
};
|
||||
// 增加
|
||||
if(type == 'add'){
|
||||
|
|
@ -434,8 +447,9 @@ layui.define('form', function(exports){
|
|||
};
|
||||
|
||||
// 新增节点
|
||||
var key = options.operate && options.operate(returnObj)
|
||||
,obj = {};
|
||||
var key = options.operate && options.operate(returnObj);
|
||||
var obj = {};
|
||||
|
||||
obj.title = options.text.defaultNodeName;
|
||||
obj.id = key;
|
||||
that.tree(elem.children('.'+ELEM_PACK), [obj]);
|
||||
|
|
@ -445,8 +459,10 @@ layui.define('form', function(exports){
|
|||
// 节点本身无子节点
|
||||
if(!packCont[0]){
|
||||
// 遍历兄弟节点，判断兄弟节点是否有子节点
|
||||
var siblings = elem.siblings('.'+ELEM_SET), num = 1
|
||||
,parentPack = elem.parent('.'+ELEM_PACK);
|
||||
var siblings = elem.siblings('.'+ELEM_SET)
|
||||
var num = 1;
|
||||
var parentPack = elem.parent('.'+ELEM_PACK);
|
||||
|
||||
layui.each(siblings, function(index, i){
|
||||
if(!$(i).children('.'+ELEM_PACK)[0]){
|
||||
num = 0;
|
||||
|
|
@ -551,10 +567,12 @@ layui.define('form', function(exports){
|
|||
var elemDel = function(elem){
|
||||
// 若无父结点，则不执行
|
||||
if(!elem.parents('.'+ELEM_SET)[0]) return;
|
||||
var siblingTree = elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY)
|
||||
,parentTree = elem.parent('.'+ELEM_PACK).prev()
|
||||
,checkState = parentTree.find('input[same="layuiTreeCheck"]')[0]
|
||||
,state = 1, num = 0;
|
||||
var siblingTree = elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY);
|
||||
var parentTree = elem.parent('.'+ELEM_PACK).prev();
|
||||
var checkState = parentTree.find('input[same="layuiTreeCheck"]')[0];
|
||||
var state = 1;
|
||||
var num = 0;
|
||||
|
||||
// 若父节点未勾选
|
||||
if(checkState.checked == false){
|
||||
// 遍历兄弟节点
|
||||
|
|
@ -583,8 +601,10 @@ layui.define('form', function(exports){
|
|||
// 若开启连接线
|
||||
if(options.showLine){
|
||||
// 遍历兄弟节点，判断兄弟节点是否有子节点
|
||||
var siblings = elem.siblings('.'+ELEM_SET), num = 1
|
||||
,parentPack = elem.parent('.'+ELEM_PACK);
|
||||
var siblings = elem.siblings('.'+ELEM_SET);
|
||||
var num = 1;
|
||||
var parentPack = elem.parent('.'+ELEM_PACK);
|
||||
|
||||
layui.each(siblings, function(index, i){
|
||||
if(!$(i).children('.'+ELEM_PACK)[0]){
|
||||
num = 0;
|
||||
|
|
@ -651,19 +671,19 @@ layui.define('form', function(exports){
|
|||
|
||||
// 部分事件
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,checkWarp = that.elem.find('.layui-tree-checkedFirst');
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var checkWarp = that.elem.find('.layui-tree-checkedFirst');
|
||||
|
||||
// 初始选中
|
||||
that.setChecked(that.checkids);
|
||||
|
||||
// 搜索
|
||||
that.elem.find('.layui-tree-search').on('keyup', function(){
|
||||
var input = $(this)
|
||||
,val = input.val()
|
||||
,pack = input.nextAll()
|
||||
,arr = [];
|
||||
var input = $(this);
|
||||
var val = input.val();
|
||||
var pack = input.nextAll();
|
||||
var arr = [];
|
||||
|
||||
// 遍历所有的值
|
||||
pack.find('.'+ ELEM_TEXT).each(function(){
|
||||
|
|
@ -712,10 +732,10 @@ layui.define('form', function(exports){
|
|||
|
||||
// 得到选中节点
|
||||
Class.prototype.getChecked = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,checkId = []
|
||||
,checkData = [];
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var checkId = [];
|
||||
var checkData = [];
|
||||
|
||||
// 遍历节点找到选中索引
|
||||
that.elem.find('.layui-form-checked').each(function(){
|
||||
|
|
@ -749,14 +769,14 @@ layui.define('form', function(exports){
|
|||
|
||||
// 设置选中节点
|
||||
Class.prototype.setChecked = function(checkedId){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
// 初始选中
|
||||
that.elem.find('.'+ELEM_SET).each(function(i, item){
|
||||
var thisId = $(this).data('id')
|
||||
,input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]')
|
||||
,reInput = input.next();
|
||||
var thisId = $(this).data('id');
|
||||
var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]');
|
||||
var reInput = input.next();
|
||||
|
||||
// 若返回数字
|
||||
if(typeof checkedId === 'number'){
|
||||
|
|
|
|||
Loading…
Reference in New Issue