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

下拉菜单新增reloadData方法；form赋值的的时候对于单选进行调优，重新调整每个选项的checked避免出现多个checked或者无法清空的情况；表格修复有多级表头并且有部分字段宽度自动分配的情况下出现字段的宽度没有占满容器导出出现缝隙的问题；表格调整实例的记录时机，避免data模式下在一些场会遇到组件内部报错问题；表格新增getTrHtml方法可以将数据解析返回html代码方便外部调用；新增treeTable模块。

pull/1224/head
sunxiaobin89 2023-04-04 15:26:43 +08:00
parent abf6aff29a
commit 5d77e15fa3
6 changed files with 1270 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@ -21,7 +21,7 @@ const config = {
,{pkg: pkg, js: ';'}
]
//模块
,modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,tree,transfer,carousel,rate,flow,code'
,modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code'
};
// 获取参数

1
src/layui.js
View File

@ -60,6 +60,7 @@
,transfer: 'transfer' //穿梭框
,tree: 'tree' //树结构
,table: 'table' //表格
,treeTable: 'treeTable' //树表
,element: 'element' //常用元素操作
,rate: 'rate' //评分组件
,colorpicker: 'colorpicker' //颜色选择器

103
src/modules/dropdown.js
View File

@ -48,6 +48,9 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
,reload: function(options){
that.reload.call(that, options);
}
,reloadData: function(options){
dropdown.reloadData(id, options);
}
,close: function () {
that.remove()
}
@ -83,14 +86,14 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
};
//重载实例
Class.prototype.reload = function(options){
Class.prototype.reload = function(options, type){
var that = this;
that.config = $.extend({}, that.config, options);
that.init(true);
that.init(true, type);
};
// 初始化准备
Class.prototype.init = function(rerender){
Class.prototype.init = function(rerender, type){
var that = this;
var options = that.config;
@ -113,7 +116,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
var newThat = thisModule.getThis(elem.data(MOD_INDEX));
if(!newThat) return;
return newThat.reload(options);
return newThat.reload(options, type);
}
options.elem = $(options.elem);
@ -122,13 +125,13 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
options.id = 'id' in options ? options.id : (
elem.attr('id') || that.index
);
if(options.show) that.render(rerender); // 初始即显示
if(options.show || (type === 'reloadData' && that.elemView && $('body').find(that.elemView.get(0)).length)) that.render(rerender, type); //初始即显示或者面板弹出之后执行了刷新数据
that.events(); // 事件
};
//渲染
Class.prototype.render = function(rerender){
Class.prototype.render = function(rerender, type){
var that = this
,options = that.config
,elemBody = $('body')
@ -234,7 +237,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
}
//主模板
,TPL_MAIN = ['<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit">'
,TPL_MAIN = ['<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit" lay-id="' + options.id + '">'
,'</div>'].join('');
//如果是右键事件，则每次触发事件时，将允许重新渲染
@ -244,26 +247,39 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
if(!rerender && options.elem.data(MOD_INDEX +'_opened')) return;
//记录模板对象
that.elemView = $(TPL_MAIN);
that.elemView.append(options.content || getDefaultView());
//初始化某些属性
if(options.className) that.elemView.addClass(options.className);
if(options.style) that.elemView.attr('style', options.style);
//记录当前执行的实例索引
dropdown.thisId = options.id;
//插入视图
that.remove(); //移除非当前绑定元素的面板
elemBody.append(that.elemView);
options.elem.data(MOD_INDEX +'_opened', true);
that.elemView = $('.' + STR_ELEM + '[lay-id="' + options.id + '"]');
if (type === 'reloadData' && that.elemView.length) {
that.elemView.html(options.content || getDefaultView());
} else {
that.elemView = $(TPL_MAIN);
that.elemView.append(options.content || getDefaultView());
//初始化某些属性
if(options.className) that.elemView.addClass(options.className);
if(options.style) that.elemView.attr('style', options.style);
//记录当前执行的实例索引
dropdown.thisId = options.id;
//插入视图
that.remove(); //移除非当前绑定元素的面板
elemBody.append(that.elemView);
options.elem.data(MOD_INDEX +'_opened', true);
//遮罩
var shade = options.shade ? ('<div class="'+ STR_ELEM_SHADE +'" style="'+ ('z-index:'+ (that.elemView.css('z-index')-1) +'; background-color: ' + (options.shade[1] || '#000') + '; opacity: ' + (options.shade[0] || options.shade)) +'"></div>') : '';
that.elemView.before(shade);
//如果是鼠标移入事件，则鼠标移出时自动关闭
if(options.trigger === 'mouseenter'){
that.elemView.on('mouseenter', function(){
clearTimeout(thisModule.timer);
}).on('mouseleave', function(){
that.delayRemove();
});
}
}
//遮罩
var shade = options.shade ? ('<div class="'+ STR_ELEM_SHADE +'" style="'+ ('z-index:'+ (that.elemView.css('z-index')-1) +'; background-color: ' + (options.shade[1] || '#000') + '; opacity: ' + (options.shade[0] || options.shade)) +'"></div>') : '';
that.elemView.before(shade);
//坐标定位
that.position();
thisModule.prevElem = that.elemView; //记录当前打开的元素，以便在下次关闭
@ -301,15 +317,6 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
thisModule.spread(elemGroup);
}
});
//如果是鼠标移入事件，则鼠标移出时自动关闭
if(options.trigger === 'mouseenter'){
that.elemView.on('mouseenter', function(){
clearTimeout(thisModule.timer);
}).on('mouseleave', function(){
that.delayRemove();
});
}
// 组件打开完毕的事件
typeof options.ready === 'function' && options.ready(
@ -542,14 +549,34 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
};
// 重载实例
dropdown.reload = function(id, options){
dropdown.reload = function(id, options, type){
var that = thisModule.getThis(id);
if(!that) return this;
that.reload(options);
that.reload(options, type);
return thisModule.call(that);
};
// 仅重载数据
dropdown.reloadData = function(){
var args = $.extend([], arguments);
args[2] = 'reloadData';
// 重载时，与数据相关的参数
var dataParams = new RegExp('^('+ [
'data', 'templet', 'content'
].join('|') + ')$');
// 过滤与数据无关的参数
layui.each(args[1], function (key, value) {
if(!dataParams.test(key)){
delete args[1][key];
}
});
return dropdown.reload.apply(null, args);
};
// 核心入口
dropdown.render = function(options){
var inst = new Class(options);

4
src/modules/form.js
View File

@ -98,9 +98,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
itemElem[0].checked = value;
} else if(type === 'radio') { // 如果为单选框
itemElem.each(function(){
if(this.value == value ){
this.checked = true
}
this.checked = this.value == value;
});
} else { // 其它类型的表单
itemElem.val(value);

303
src/modules/table.js
View File

@ -46,11 +46,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
,options = that.config
,id = options.id || options.index;
if(id){
thisTable.that[id] = that; // 记录当前实例对象
thisTable.config[id] = options; // 记录当前实例配置项
}
return {
config: options
,reload: function(options, deep){
@ -322,10 +317,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.where = options.where || {};
// 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
options.id = 'id' in options ? options.id : (
var id = options.id = 'id' in options ? options.id : (
options.elem.attr('id') || that.index
);
thisTable.that[id] = that; // 记录当前实例对象
thisTable.config[id] = options; // 记录当前实例配置项
//请求参数的自定义格式
options.request = $.extend({
pageName: 'page'
@ -810,13 +808,20 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(that.autoColNums > 0 && patchNums >= -colNums && patchNums <= colNums){
var getEndTh = function(th){
var field;
var field, thRet;
th = th || that.layHeader.eq(0).find('thead th:last-child')
field = th.data('field');
layui.each(th, function (thIndex, thElem) {
thElem = $(thElem);
if (!thElem.children('.'+ELEM_GROUP).length) { // 排除合并表头
field = thElem.attr('data-field');
thRet = thElem;
}
})
if(!field && th.prev()[0]){
return getEndTh(th.prev())
}
return th
return thRet
}
,th = getEndTh()
,key = th.data('key');
@ -1034,6 +1039,152 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}
};
Class.prototype.getTrHtml = function(data, sort, curr, trsObj) {
var that = this;
var options = that.config;
var trs = trsObj && trsObj.trs || [];
var trs_fixed = trsObj && trsObj.trs_fixed || [];
var trs_fixed_r = trsObj && trsObj.trs_fixed_r || [];
curr = curr || 1
layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = []
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){
data[i1] = item1 = {LAY_KEY: item1};
try {
table.cache[that.key][i1] = item1;
} catch(e) {}
}
//若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []）
if(layui.type(item1) === 'array' && item1.length === 0) return;
// 加入序号保留字段
item1[table.config.numbersName] = numbers;
// 记录下标索引，用于恢复排序
if(!sort) item1[table.config.indexName] = i1;
// 遍历表头
that.eachCols(function(i3, item3){
var field = item3.field || i3;
var key = item3.key;
var content = item1[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
// td 内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){
//追加各种属性
var attr = [];
// 是否开启编辑。若 edit 传入函数，则根据函数的返回结果判断是否开启编辑
(function(edit){
if(edit) attr.push('data-edit="'+ edit +'"'); // 添加单元格编辑属性标识
})(typeof item3.edit === 'function' ? item3.edit(item1) : item3.edit);
if(item3.templet) attr.push('data-content="'+ util.escape(content) +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
if(item3.maxWidth) attr.push('data-maxwidth="'+ item3.maxWidth +'"'); //单元格最大宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); //插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'"'
+ (item3.align ? ' align="'+ item3.align +'"' : '')
+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>'
+ function(){
var tplData = $.extend(true, {
LAY_COL: item3
}, item1);
var checkName = table.config.checkName;
var disabledName = table.config.disabledName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox': // 复选
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 其他属性
var arr = [];
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
if(item3[checkName]) arr[0] = 'checked';
}
if(tplData[checkName]) arr[0] = 'checked';
// 禁选
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableCheckbox">';
break;
case 'radio': // 单选
if(tplData[checkName]){
that.thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){
var arr = [];
if(tplData[checkName]) arr[0] = 'checked';
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
//解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return parseTempData.call(that, {
item3: item3
,content: content
,tplData: tplData
});
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
return {
trs: trs,
trs_fixed: trs_fixed,
trs_fixed_r: trs_fixed_r
}
}
// 返回行节点代码
table.getTrHtml = function (id, data) {
var that = getThisTable(id);
return that.getTrHtml(data);
}
// 数据渲染
Class.prototype.renderData = function(opts){
@ -1057,7 +1208,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
var thisCheckedRowIndex;
that.thisCheckedRowIndex = '';
if(!sort && that.sortKey){
return that.sort({
field: that.sortKey.field,
@ -1066,130 +1217,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
reloadType: opts.type
});
}
layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = []
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){
data[i1] = item1 = {LAY_KEY: item1};
try {
table.cache[that.key][i1] = item1;
} catch(e) {}
}
//若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []）
if(layui.type(item1) === 'array' && item1.length === 0) return;
// 加入序号保留字段
item1[table.config.numbersName] = numbers;
// 记录下标索引，用于恢复排序
if(!sort) item1[table.config.indexName] = i1;
// 遍历表头
that.eachCols(function(i3, item3){
var field = item3.field || i3;
var key = item3.key;
var content = item1[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
// td 内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){
//追加各种属性
var attr = [];
// 是否开启编辑。若 edit 传入函数，则根据函数的返回结果判断是否开启编辑
(function(edit){
if(edit) attr.push('data-edit="'+ edit +'"'); // 添加单元格编辑属性标识
})(typeof item3.edit === 'function' ? item3.edit(item1) : item3.edit);
if(item3.templet) attr.push('data-content="'+ util.escape(content) +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
if(item3.maxWidth) attr.push('data-maxwidth="'+ item3.maxWidth +'"'); //单元格最大宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); //插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'"'
+ (item3.align ? ' align="'+ item3.align +'"' : '')
+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>'
+ function(){
var tplData = $.extend(true, {
LAY_COL: item3
}, item1);
var checkName = table.config.checkName;
var disabledName = table.config.disabledName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox': // 复选
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 其他属性
var arr = [];
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
if(item3[checkName]) arr[0] = 'checked';
}
if(tplData[checkName]) arr[0] = 'checked';
// 禁选
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableCheckbox">';
break;
case 'radio': // 单选
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){
var arr = [];
if(tplData[checkName]) arr[0] = 'checked';
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
//解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return parseTempData.call(that, {
item3: item3
,content: content
,tplData: tplData
});
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
that.getTrHtml(data, sort, curr, {
trs: trs,
trs_fixed: trs_fixed,
trs_fixed_r: trs_fixed_r
});
// 容器的滚动条位置
@ -1208,9 +1239,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.renderForm();
// 标注选中行样式
typeof thisCheckedRowIndex === 'number' && that.setRowChecked({
typeof that.thisCheckedRowIndex === 'number' && that.setRowChecked({
type: 'radio',
index: thisCheckedRowIndex
index: that.thisCheckedRowIndex
}, true);
that.syncCheckAll();

1035
src/modules/treeTable.js Normal file
View File

File diff suppressed because it is too large Load Diff