github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

修改在树形组件中使用长数字字符串作为节点id时setChecked出现的问题

pull/1115/head
ZZZping 2 years ago
parent
1f70305f22
commit
a74548b040
1 changed files with 72 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      src/modules/tree.js

144
src/modules/tree.js
Unescape View File

@ -4,11 +4,11 @@
layui.define('form', function(exports){
"use strict";
var $ = layui.$
,form = layui.form
,layer = layui.layer
//模块名
,MOD_NAME = 'tree'
@ -23,7 +23,7 @@ layui.define('form', function(exports){
that.config = $.extend({}, that.config, options);
return that;
}
//事件
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
@ -35,10 +35,10 @@ layui.define('form', function(exports){
var that = this
,options = that.config
,id = options.id || that.index;
thisModule.that[id] = that; //记录当前实例对象
thisModule.config[id] = options; //记录当前实例配置项
return {
config: options
//重置实例
@ -53,7 +53,7 @@ layui.define('form', function(exports){
}
}
}
//获取当前实例配置项
,getThisModuleConfig = function(id){
var config = thisModule.config[id];
@ -63,11 +63,11 @@ layui.define('form', function(exports){
//字符常量
,SHOW = 'layui-show', HIDE = 'layui-hide', NONE = 'layui-none', 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'
//构造器
,Class = function(options){
var that = this;
@ -79,28 +79,28 @@ layui.define('form', function(exports){
//默认配置
Class.prototype.config = {
data: [] //数据
,showCheckbox: false //是否显示复选框
,showLine: true //是否开启连接线
,accordion: false //是否开启手风琴模式
,onlyIconControl: false //是否仅允许节点左侧图标控制展开收缩
,isJump: false //是否允许点击节点时弹出新窗口跳转
,edit: false //是否开启节点的操作图标
,text: {
defaultNodeName: '未命名' //节点默认名称
,none: '无数据' //数据为空时的文本提示
}
};
//重载实例
Class.prototype.reload = function(options){
var that = this;
layui.each(options, function(key, item){
if(layui.type(item) === 'array') delete that.config[key];
});
that.config = $.extend(true, {}, that.config, options);
that.render();
};
@ -109,7 +109,7 @@ layui.define('form', function(exports){
Class.prototype.render = function(){
var that = this
,options = that.config;
that.checkids = [];
var temp = $('<div class="layui-tree'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'" lay-filter="LAY-tree-'+ that.index +'"></div>');
@ -120,7 +120,7 @@ layui.define('form', function(exports){
//索引
that.key = options.id || that.index;
//插入组件结构
that.elem = temp;
that.elemNone = $('<div class="layui-tree-emptyText">'+ options.text.none +'</div>');
@ -129,7 +129,7 @@ layui.define('form', function(exports){
if(that.elem.find('.layui-tree-set').length == 0){
return that.elem.append(that.elemNone);
};
//复选框渲染
if(options.showCheckbox){
that.renderForm('checkbox');
@ -146,7 +146,7 @@ layui.define('form', function(exports){
if(!othis.next()[0] && othis.parents('.layui-tree-pack').eq(1).hasClass('layui-tree-lineExtend')){
othis.addClass(ELEM_LINE_SHORT);
};
//没有下一个节点 外层最后一个
if(!othis.next()[0] && !othis.parents('.layui-tree-set').eq(0).next()[0]){
othis.addClass(ELEM_LINE_SHORT);
@ -155,7 +155,7 @@ layui.define('form', function(exports){
that.events();
};
//渲染表单
Class.prototype.renderForm = function(type){
form.render(type, 'LAY-tree-'+ this.index);
@ -186,12 +186,12 @@ layui.define('form', function(exports){
return '<span class="layui-tree-iconClick"><i class="layui-tree-iconArrow '+ (hasChild ? "": HIDE) +'"></i></span>';
};
}()
//复选框
,function(){
return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item.id)) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item.id +'">' : '';
}()
//节点
,function(){
if(options.isJump && item.href){
@ -201,21 +201,21 @@ layui.define('form', function(exports){
}
}()
,'</div>'
//节点操作图标
,function(){
if(!options.edit) return '';
var editIcon = {
add: '<i class="layui-icon layui-icon-add-1" data-type="add"></i>'
,update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>'
,del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>'
}, arr = ['<div class="layui-btn-group layui-tree-btnGroup">'];
if(options.edit === true){
options.edit = ['update', 'del']
}
if(typeof options.edit === 'object'){
layui.each(options.edit, function(i, val){
arr.push(editIcon[val] || '')
@ -232,12 +232,12 @@ layui.define('form', function(exports){
};
elem.append(entryDiv);
//若有前置节点，前置节点加连接线
if(entryDiv.prev('.'+ELEM_SET)[0]){
entryDiv.prev().children('.layui-tree-pack').addClass('layui-tree-showLine');
};
//若无子节点，则父节点加延伸线
if(!hasChild){
entryDiv.parent('.layui-tree-pack').addClass('layui-tree-lineExtend');
@ -245,16 +245,16 @@ layui.define('form', function(exports){
//展开节点操作
that.spread(entryDiv, item);
//选择框
if(options.showCheckbox){
item.checked && that.checkids.push(item.id);
that.checkClick(entryDiv, item);
}
//操作节点
options.edit && that.operate(entryDiv, item);
});
};
@ -268,7 +268,7 @@ layui.define('form', function(exports){
,elemText = entry.find('.'+ ELEM_TEXT)
,touchOpen = options.onlyIconControl ? elemIcon : elemMain //判断展开通过节点还是箭头图标
,state = '';
//展开收缩
touchOpen.on('click', function(e){
var packCont = elem.children('.'+ELEM_PACK)
@ -281,7 +281,7 @@ layui.define('form', function(exports){
if(elem.hasClass(ELEM_SPREAD)){
elem.removeClass(ELEM_SPREAD);
packCont.slideUp(200);
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD);
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD);
}else{
elem.addClass(ELEM_SPREAD);
packCont.slideDown(200);
@ -297,21 +297,21 @@ layui.define('form', function(exports){
};
};
});
//点击回调
elemText.on('click', function(){
var othis = $(this);
//判断是否禁用状态
if(othis.hasClass(DISABLED)) return;
//判断展开收缩状态
if(elem.hasClass(ELEM_SPREAD)){
state = options.onlyIconControl ? 'open' : 'close';
} else {
state = options.onlyIconControl ? 'close' : 'open';
}
//点击产生的回调
options.click && options.click({
elem: elem
@ -320,13 +320,13 @@ layui.define('form', function(exports){
});
});
};
//计算复选框选中状态
Class.prototype.setCheckbox = function(elem, item, elemCheckbox){
var that = this
,options = that.config
,checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return;
//同步子节点选中状态
@ -357,38 +357,38 @@ layui.define('form', function(exports){
state = true;
}
});
//如果兄弟子孙节点全部未选中，则父节点也应为非选中状态
state || parentCheckbox.prop('checked', false);
}
//向父节点递归
setParentsChecked(parentNodeElem);
};
setParentsChecked(elem);
that.renderForm('checkbox');
};
//复选框选择
Class.prototype.checkClick = function(elem, item){
var that = this
,options = that.config
,entry = elem.children('.'+ ELEM_ENTRY)
,elemMain = entry.children('.'+ ELEM_MAIN);
//点击复选框
elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){
layui.stope(e); //阻止点击节点事件
var elemCheckbox = $(this).prev()
,checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return;
that.setCheckbox(elem, item, elemCheckbox);
//复选框点击产生的回调
@ -439,7 +439,7 @@ layui.define('form', function(exports){
obj.title = options.text.defaultNodeName;
obj.id = key;
that.tree(elem.children('.'+ELEM_PACK), [obj]);
//放在新增后面，因为要对元素进行操作
if(options.showLine){
//节点本身无子节点
@ -495,7 +495,7 @@ layui.define('form', function(exports){
packLast.find('input[same="layuiTreeCheck"]')[0].checked = true;
};
that.renderForm('checkbox');
//修改
}else if(type == 'update'){
var text = elemMain.children('.'+ ELEM_TEXT).html();
@ -510,10 +510,10 @@ layui.define('form', function(exports){
textNew = textNew ? textNew : options.text.defaultNodeName;
input.remove();
elemMain.children('.'+ ELEM_TEXT).html(textNew);
//同步数据
returnObj.data.title = textNew;
//节点修改的回调
options.operate && options.operate(returnObj);
};
@ -534,9 +534,9 @@ layui.define('form', function(exports){
layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item.title || '') +'</span>" 吗？', function(index){
options.operate && options.operate(returnObj); //节点删除的回调
returnObj.status = 'remove'; //标注节点删除
layer.close(index);
//若删除最后一个，显示空数据提示
if(!elem.prev('.'+ELEM_SET)[0] && !elem.next('.'+ELEM_SET)[0] && !elem.parent('.'+ELEM_PACK)[0]){
elem.remove();
@ -616,7 +616,7 @@ layui.define('form', function(exports){
};
};
};
}else{
//若无兄弟节点
var prevDiv = elem.parent('.'+ELEM_PACK).prev();
@ -644,7 +644,7 @@ layui.define('form', function(exports){
elem.remove();
});
};
});
};
@ -654,10 +654,10 @@ layui.define('form', function(exports){
var that = this
,options = that.config
,checkWarp = that.elem.find('.layui-tree-checkedFirst');
//初始选中
that.setChecked(that.checkids);
//搜索
that.elem.find('.layui-tree-search').on('keyup', function(){
var input = $(this)
@ -671,7 +671,7 @@ layui.define('form', function(exports){
//若值匹配，加一个类以作标识
if($(this).html().indexOf(val) != -1){
arr.push($(this).parent());
var select = function(div){
div.addClass('layui-tree-searchShow');
//向上父节点渲染
@ -716,12 +716,12 @@ layui.define('form', function(exports){
,options = that.config
,checkId = []
,checkData = [];
//遍历节点找到选中索引
that.elem.find('.layui-form-checked').each(function(){
checkId.push($(this).prev()[0].value);
});
//遍历节点
var eachNodes = function(data, checkNode){
layui.each(data, function(index, item){
@ -729,9 +729,9 @@ layui.define('form', function(exports){
if(item.id == item2){
var cloneItem = $.extend({}, item);
delete cloneItem.children;
checkNode.push(cloneItem);
if(item.children){
cloneItem.children = [];
eachNodes(item.children, cloneItem.children);
@ -743,7 +743,7 @@ layui.define('form', function(exports){
};
eachNodes($.extend({}, options.data), checkData);
return checkData;
};
@ -757,20 +757,20 @@ layui.define('form', function(exports){
var thisId = $(this).data('id')
,input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]')
,reInput = input.next();
//若返回数字
if(typeof checkedId === 'number'){
if(thisId == checkedId){
if(thisId.toString() == checkedId.toString()){
if(!input[0].checked){
reInput.click();
};
return false;
};
}
}
//若返回数组
else if(typeof checkedId === 'object'){
layui.each(checkedId, function(index, value){
if(value == thisId && !input[0].checked){
if(value.toString() == thisId.toString() && !input[0].checked){
reInput.click();
return true;
}
@ -782,27 +782,27 @@ layui.define('form', function(exports){
//记录所有实例
thisModule.that = {}; //记录所有实例对象
thisModule.config = {}; //记录所有实例配置项
//重载实例
tree.reload = function(id, options){
var that = thisModule.that[id];
that.reload(options);
return thisModule.call(that);
};
//获得选中的节点数据
tree.getChecked = function(id){
var that = thisModule.that[id];
return that.getChecked();
};
//设置选中节点
tree.setChecked = function(id, checkedId){
var that = thisModule.that[id];
return that.setChecked(checkedId);
};
//核心入口
tree.render = function(options){
var inst = new Class(options);
@ -810,4 +810,4 @@ layui.define('form', function(exports){
};
exports(MOD_NAME, tree);
})
})

Write Preview
Loading…
Cancel
Save