lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-05-17 13:39:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

优化 table 代码书写规范

Browse Source 
优化table.js代码
This commit is contained in:
贤心 2023-08-22 13:49:02 +08:00 committed by GitHub
commit 42b99bf580
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/modules/table.js
View File

@ -329,18 +329,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//请求参数的自定义格式 //请求参数的自定义格式
options.request = $.extend({ options.request = $.extend({
pageName: 'page' pageName: 'page',
,limitName: 'limit' limitName: 'limit'
}, options.request) }, options.request)
// 响应数据的自定义格式 // 响应数据的自定义格式
options.response = $.extend({ options.response = $.extend({
statusName: 'code' //规定数据状态的字段名称 statusName: 'code', //规定数据状态的字段名称
,statusCode: 0 //规定成功的状态码 statusCode: 0, //规定成功的状态码
,msgName: 'msg' //规定状态信息的字段名称 msgName: 'msg', //规定状态信息的字段名称
,dataName: 'data' //规定数据总数的字段名称 dataName: 'data', //规定数据总数的字段名称
,totalRowName: 'totalRow' //规定数据统计的字段名称 totalRowName: 'totalRow', //规定数据统计的字段名称
,countName: 'count' countName: 'count'
}, options.response); }, options.response);
//如果 page 传入 laypage 对象 //如果 page 传入 laypage 对象
@ -386,11 +386,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
//开始插入替代元素 //开始插入替代元素
var othis = options.elem var othis = options.elem;
,hasRender = othis.next('.' + ELEM_VIEW) var hasRender = othis.next('.' + ELEM_VIEW);
//主容器 //主容器
,reElem = that.elem = $('<div></div>'); var reElem = that.elem = $('<div></div>');
reElem.addClass(function(){ reElem.addClass(function(){
var arr = [ var arr = [
@ -402,9 +402,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(options.className) arr.push(options.className); if(options.className) arr.push(options.className);
return arr.join(' '); return arr.join(' ');
}()).attr({ }()).attr({
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index 'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index,
,'lay-id': options.id 'lay-id': options.id,
,'style': function(){ 'style': function(){
var arr = []; var arr = [];
if(options.width) arr.push('width:'+ options.width + 'px;'); if(options.width) arr.push('width:'+ options.width + 'px;');
// if(options.height) arr.push('height:'+ options.height + 'px;'); // if(options.height) arr.push('height:'+ options.height + 'px;');
@ -414,8 +414,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
open: '{{', // 标签符前缀 open: '{{', // 标签符前缀
close: '}}' // 标签符后缀 close: '}}' // 标签符后缀
}).render({ }).render({
data: options data: options,
,index: that.index //索引 index: that.index //索引
})); }));
//生成替代元素 //生成替代元素
@ -450,12 +450,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//根据列类型，定制化参数 //根据列类型，定制化参数
Class.prototype.initOpts = function(item){ Class.prototype.initOpts = function(item){
var that = this var that = this
,options = that.config var options = that.config;
,initWidth = { var initWidth = {
checkbox: 50 checkbox: 50,
,radio: 50 radio: 50,
,space: 30 space: 30,
,numbers: 60 numbers: 60
}; };
//让 type 参数兼容旧版本 //让 type 参数兼容旧版本
@ -471,8 +471,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//初始化一些参数 //初始化一些参数
Class.prototype.setInit = function(type){ Class.prototype.setInit = function(type){
var that = this var that = this;
,options = that.config; var options = that.config;
options.clientWidth = options.width || function(){ //获取容器宽度 options.clientWidth = options.width || function(){ //获取容器宽度
//如果父元素宽度为0（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止 //如果父元素宽度为0（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止
@ -926,6 +926,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.HAS_SET_COLS_PATCH = true; options.HAS_SET_COLS_PATCH = true;
var request = options.request; var request = options.request;
var response = options.response; var response = options.response;
var res;
var sort = function(){ var sort = function(){
if(typeof options.initSort === 'object'){ if(typeof options.initSort === 'object'){
that.sort({ that.sort({
@ -951,7 +952,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.startTime = new Date().getTime(); // 渲染开始时间 that.startTime = new Date().getTime(); // 渲染开始时间
if (opts.renderData) { // 将 cache 信息重新渲染 if (opts.renderData) { // 将 cache 信息重新渲染
var res = {}; res = {};
res[response.dataName] = table.cache[that.key]; res[response.dataName] = table.cache[that.key];
res[response.countName] = options.url ? (layui.type(options.page) === 'object' ? options.page.count : res[response.dataName].length) : options.data.length; res[response.countName] = options.url ? (layui.type(options.page) === 'object' ? options.page.count : res[response.dataName].length) : options.data.length;
@ -1021,7 +1022,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
}); });
} else if(layui.type(options.data) === 'array'){ //已知数据 } else if(layui.type(options.data) === 'array'){ //已知数据
var res = {}; res = {};
var startLimit = curr*options.limit - options.limit; var startLimit = curr*options.limit - options.limit;
var newData = options.data.concat(); var newData = options.data.concat();
@ -1074,8 +1075,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
curr = curr || 1 curr = curr || 1
layui.each(data, function(i1, item1){ layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = [] var tds = [];
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号 var tds_fixed = [];
var tds_fixed_r = [];
var numbers = i1 + options.limit*(curr - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object // 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){ if(typeof item1 !== 'object'){
@ -1159,7 +1162,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
return arr.join(' '); return arr.join(' ');
}() +' lay-type="layTableCheckbox">'; }() +' lay-type="layTableCheckbox">';
break; //break;
case 'radio': // 单选 case 'radio': // 单选
return '<input type="radio" name="layTableRadio_'+ options.index +'" ' return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){ + function(){
@ -1168,10 +1171,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(tplData[disabledName]) arr.push('disabled'); if(tplData[disabledName]) arr.push('disabled');
return arr.join(' '); return arr.join(' ');
}() +' lay-type="layTableRadio">'; }() +' lay-type="layTableRadio">';
break; //break;
case 'numbers': case 'numbers':
return numbers; return numbers;
break; //break;
}; };
//解析工具列模板 //解析工具列模板
@ -1309,15 +1312,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//同步分页状态 //同步分页状态
if(options.page){ if(options.page){
options.page = $.extend({ options.page = $.extend({
elem: 'layui-table-page' + options.index elem: 'layui-table-page' + options.index,
,count: count count: count,
,limit: options.limit limit: options.limit,
,limits: options.limits || [10,20,30,40,50,60,70,80,90] limits: options.limits || [10,20,30,40,50,60,70,80,90],
,groups: 3 groups: 3,
,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
,prev: '<i class="layui-icon">&#xe603;</i>' prev: '<i class="layui-icon">&#xe603;</i>',
,next: '<i class="layui-icon">&#xe602;</i>' next: '<i class="layui-icon">&#xe602;</i>',
,jump: function(obj, first){ jump: function(obj, first){
if(!first){ if(!first){
//分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们 //分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们
//而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用） //而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用）
@ -1394,9 +1397,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 获取自动计算的合并内容 // 获取自动计算的合并内容
var getContent = item3.totalRow ? (parseTempData.call(that, { var getContent = item3.totalRow ? (parseTempData.call(that, {
item3: item3 item3: item3,
,content: thisTotalNum content: thisTotalNum,
,tplData: tplData tplData: tplData
}) || text) : text; }) || text) : text;
// 如果直接传入了合计行数据，则不输出自动计算的结果 // 如果直接传入了合计行数据，则不输出自动计算的结果
@ -1421,8 +1424,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式 if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); // 插入特殊列样式 if(!item3.field) classNames.push(ELEM_COL_SPECIAL); // 插入特殊列样式
return classNames.join(' '); return classNames.join(' ');
}() +'">' }() +'">',
,'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识 '<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
var key = item3.key; var key = item3.key;
return item3.type === 'normal' ? key return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type); : (key + ' laytable-cell-' + item3.type);
@ -1443,8 +1446,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}, item3)); }, item3));
} }
return content; return content;
}() }(),
,'</div></td>'].join(''); '</div></td>'].join('');
tds.push(td); tds.push(td);
}); });
@ -1455,8 +1458,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//找到对应的列元素 //找到对应的列元素
Class.prototype.getColElem = function(parent, key){ Class.prototype.getColElem = function(parent, key){
var that = this var that = this;
,options = that.config; //var options = that.config;
return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)'); return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)');
}; };
@ -1570,8 +1573,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(typeof opts.field === 'string'){ if(typeof opts.field === 'string'){
field = opts.field; field = opts.field;
that.layHeader.find('th').each(function(i, item){ that.layHeader.find('th').each(function(i, item){
var othis = $(this) var othis = $(this);
,_field = othis.data('field'); var _field = othis.data('field');
if(_field === opts.field){ if(_field === opts.field){
opts.field = othis; opts.field = othis;
field = _field; field = _field;
@ -1581,8 +1584,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
try { try {
var field = field || opts.field.data('field') field = field || opts.field.data('field');
,key = opts.field.data('key'); var key = opts.field.data('key');
// 如果欲执行的排序已在状态中，则不执行渲染 // 如果欲执行的排序已在状态中，则不执行渲染
if(that.sortKey && !opts.pull){ if(that.sortKey && !opts.pull){
@ -1601,8 +1604,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 记录排序索引和类型 // 记录排序索引和类型
that.sortKey = { that.sortKey = {
field: field field: field,
,sort: opts.type sort: opts.type
}; };
// 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序） // 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
@ -1632,8 +1635,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 排序是否来自于点击表头事件触发 // 排序是否来自于点击表头事件触发
if(opts.fromEvent){ if(opts.fromEvent){
options.initSort = { options.initSort = {
field: field field: field,
,type: opts.type type: opts.type
}; };
layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({ layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({
config: options config: options
@ -1651,9 +1654,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
delete that.layInit; delete that.layInit;
that.layBox.find(ELEM_INIT).remove(); that.layBox.find(ELEM_INIT).remove();
} else { } else {
that.layInit = $(['<div class="layui-table-init">' that.layInit = $(['<div class="layui-table-init">',
,'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>' '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',
,'</div>'].join('')); '</div>'].join(''));
that.layBox.append(that.layInit); that.layBox.append(that.layInit);
} }
} }
@ -1674,10 +1677,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//让表格铺满 //让表格铺满
Class.prototype.fullSize = function(){ Class.prototype.fullSize = function(){
var that = this var that = this;
,options = that.config var options = that.config;
,height = options.height var height = options.height;
,bodyHeight; var bodyHeight;
if(that.fullHeightGap){ if(that.fullHeightGap){
height = _WIN.height() - that.fullHeightGap; height = _WIN.height() - that.fullHeightGap;
@ -1898,8 +1901,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
'<li data-type="csv">导出 csv 格式文件</li>', '<li data-type="csv">导出 csv 格式文件</li>',
'<li data-type="xls">导出 xls 格式文件</li>' '<li data-type="xls">导出 xls 格式文件</li>'
].join('') ].join('')
}() }(),
,done: function(panel, list){ done: function(panel, list){
list.on('click', function(){ list.on('click', function(){
var type = $(this).data('type') var type = $(this).data('type')
table.exportFile.call(that, options.id, null, type); table.exportFile.call(that, options.id, null, type);
@ -1944,8 +1947,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({ layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({
event: events event: events,
,config: options config: options
},{})); },{}));
}); });
@ -1970,16 +1973,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var events = othis.attr('lay-event'); var events = othis.attr('lay-event');
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({ layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
event: events event: events,
,config: options config: options
},{})); },{}));
}); });
// 拖拽调整宽度 // 拖拽调整宽度
th.on('mousemove', function(e){ th.on('mousemove', function(e){
var othis = $(this) var othis = $(this);
,oLeft = othis.offset().left var oLeft = othis.offset().left;
,pLeft = e.clientX - oLeft; var pLeft = e.clientX - oLeft;
if(othis.data('unresize') || thisTable.eventMoveElem){ if(othis.data('unresize') || thisTable.eventMoveElem){
return; return;
} }
@ -2095,9 +2098,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
fromEvent: true fromEvent: true
}); });
}).find(ELEM_SORT+' .layui-edge ').on('click', function(e){ }).find(ELEM_SORT+' .layui-edge ').on('click', function(e){
var othis = $(this) var othis = $(this);
,index = othis.index() var index = othis.index();
,field = othis.parents('th').eq(0).data('field') var field = othis.parents('th').eq(0).data('field');
layui.stope(e); layui.stope(e);
if(index === 0){ if(index === 0){
that.sort({ that.sort({
@ -2652,8 +2655,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 遍历表头 // 遍历表头
table.eachCols = function(id, callback, cols){ table.eachCols = function(id, callback, cols){
var config = thisTable.config[id] || {} var config = thisTable.config[id] || {};
,arrs = [], index = 0; var arrs = [], index = 0;
cols = $.extend(true, [], cols || config.cols); cols = $.extend(true, [], cols || config.cols);
@ -2713,12 +2716,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 获取表格当前页的所有行数据 // 获取表格当前页的所有行数据
table.getData = function(id){ table.getData = function(id){
var arr = [] var arr = [];
,data = table.cache[id] || []; var data = table.cache[id] || [];
layui.each(data, function(i, item){ layui.each(data, function(i, item){
if(layui.type(item) === 'array'){ if(layui.type(item) === 'array'){
return; return;
}; }
arr.push(table.clearCacheKey(item)); arr.push(table.clearCacheKey(item));
}); });
return arr; return arr;
@ -2753,8 +2756,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var thatTable = thisTable.that[id]; var thatTable = thisTable.that[id];
var config = thisTable.config[id] || {}; var config = thisTable.config[id] || {};
var textType = ({ var textType = ({
csv: 'text/csv' csv: 'text/csv',
,xls: 'application/vnd.ms-excel' xls: 'application/vnd.ms-excel'
})[type]; })[type];
var alink = document.createElement("a"); var alink = document.createElement("a");
@ -2792,11 +2795,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 解析内容 // 解析内容
content = parseTempData.call(thatTable, { content = parseTempData.call(thatTable, {
item3: item3 item3: item3,
,content: content content: content,
,tplData: item1 tplData: item1,
,text: 'text' text: 'text',
,obj: { obj: {
td: function(field){ td: function(field){
var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td'); var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td');
return td.filter('[data-field="'+ field +'"]'); return td.filter('[data-field="'+ field +'"]');