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

优化 table 代码书写规范 

优化table.js代码
pull/1336/head
贤心 1 year ago committed by GitHub
parent
7db1d8d744 c65aabe2b1
commit
42b99bf580
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 91 additions and 88 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. 179
      src/modules/table.js

179
src/modules/table.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save