/** * 表格扩展模块 * date:2019-07-12 License By http://easyweb.vip */ layui.define(['layer', 'table', 'laytpl', 'form', 'util', 'contextMenu'], function (exports) { var $ = layui.jquery; var layer = layui.layer; var table = layui.table; var laytpl = layui.laytpl; var form = layui.form; var util = layui.util; var contextMenu = layui.contextMenu; var device = layui.device; var tbSearchAttr = 'tb-search'; // 前端搜索属性 var tbRefreshAttr = 'tb-refresh'; // 刷新按钮属性 var tbExportAttr = 'tb-export'; // 导出按钮属性 var txFieldPre = 'txField_'; // templte列filed前缀 var tableX = { // 合并相同单元格 merges: function (tableId, indexs, fields, sort) { // 检查参数是否为空 if (!tableId) { console.error('table filter not be null'); return; } if (!indexs) { console.warn('merge indexs not be null'); return; } if (typeof fields === 'boolean') { sort = fields; fields = undefined; } var $tb = $('[lay-filter="' + tableId + '"]+.layui-table-view>.layui-table-box>.layui-table-body>table'); var $trs = $tb.find('>tbody>tr'); $tb.addClass('layui-table-x'); // 合并一列 function merge(tableId, index, field) { var data = table.cache[tableId]; if (data.length > 0) { var lastValue, spanNum = 1; if (field) { lastValue = data[0][field]; } else { lastValue = $trs.eq(0).find('td').eq(index).find('.layui-table-cell').html(); } for (var i = 1; i < data.length; i++) { var currentValue; if (field) { currentValue = data[i][field]; } else { currentValue = $trs.eq(i).find('td').eq(index).find('.layui-table-cell').html(); } if (currentValue == lastValue) { spanNum++; if (i == data.length - 1) { $trs.eq(i - spanNum + 1).find('td').eq(index).attr('rowspan', spanNum); for (var j = 1; j < spanNum; j++) { $trs.eq(i - j + 1).find('td').eq(index).attr('del', 'true'); } } } else { $trs.eq(i - spanNum).find('td').eq(index).attr('rowspan', spanNum); for (var j = 1; j < spanNum; j++) { $trs.eq(i - j).find('td').eq(index).attr('del', 'true'); } spanNum = 1; lastValue = currentValue; } } } } // 循环合并每一列 for (var i = 0; i < indexs.length; i++) { if (!fields) { merge(tableId, indexs[i], undefined); } else { merge(tableId, indexs[i], fields[i]); } } $trs.find('[del="true"]').remove(); // 移除多余的单元格 // 监听排序事件 (sort == undefined) && (sort = true); if (sort) { table.on('sort(' + tableId + ')', function (obj) { tableX.merges(tableId, indexs, fields); }); } }, // 导出表格数据 exportData: function (param) { var cols = param.cols; // 表头 var dataList = param.data; // 数据 var fileName = param.fileName; // 文件名 var fileType = param.expType; // 类型,xls、csv var option = param.option; // url方式加载的配置 if (device.ie) return layer.msg('不支持ie导出'); // data为url先请求数据 if (dataList && typeof dataList === 'string') { var loadIndex = layer.msg('加载中..', {icon: 16, shade: 0.01, time: 0}); option.url = dataList; tableX.loadUrl(option, function (res) { layer.close(loadIndex); param.data = res; tableX.exportData(param); }); } // 列参数补全 for (var i = 0; i < cols.length; i++) { for (var j = 0; j < cols[i].length; j++) { if (cols[i][j].type == undefined) { cols[i][j].type = 'normal'; } if (cols[i][j].hide == undefined) { cols[i][j].hide = false; } } } var titles = [], fields = [], expData = []; // 获取表头和表头字段名 table.eachCols(undefined, function (i, item) { if (item.type == 'normal' && !item.hide) { titles.push(item.title ? item.title : ''); fields.push(item.field ? item.field : (txFieldPre + i)); } }, cols); // 格式化数据 var allList = tableX.parseTbData(cols, tableX.deepClone(dataList), true); for (var i = 0; i < allList.length; i++) { var rowItem = []; for (var j = 0; j < fields.length; j++) { var itemVal = allList[i][fields[j]]; if (typeof itemVal == 'string') { itemVal = itemVal.replace(/,/g, ','); } rowItem.push(itemVal); } expData.push(rowItem); } // 创建下载文件的a标签 var textType = ({csv: 'text/csv', xls: 'application/vnd.ms-excel'})[fileType]; var alink = document.createElement("a"); var getDataStr = function () { var dataTitle = [], dataMain = []; layui.each(expData, function (i1, item1) { var vals = []; layui.each(titles, function (i, item) { i1 == 0 && dataTitle.push(item || ''); }); layui.each(table.clearCacheKey(item1), function (i2, item2) { vals.push(item2); }); dataMain.push(vals.join(',')) }); return titles.join(',') + '\r\n' + expData.join('\r\n'); }; alink.href = 'data:' + textType + ';charset=utf-8,\ufeff' + encodeURIComponent(getDataStr()); alink.download = (fileName || 'table') + '.' + (fileType ? fileType : 'xls'); document.body.appendChild(alink); alink.click(); document.body.removeChild(alink); }, // 渲染表格,后端排序 render: function (param) { var tableId = $(param.elem).attr('lay-filter'); param.autoSort = false; // 关闭默认排序 var insTb = table.render(param); // 渲染表格 // 排序监听 table.on('sort(' + tableId + ')', function (obj) { var sortField = obj.field, sortType = obj.type; // 排序字段、类型 var sortWhere = $.extend(param.where, {sort: sortField, order: sortType}); insTb.reload({where: sortWhere, page: {curr: 1}}); }); return insTb; }, // 渲染表格,前端分页 renderFront: function (param) { var insTb, tableId = $(param.elem).attr('lay-filter'); param.autoSort = false; // 关闭默认排序 // 没有field的templet列补上,因为排序必须有filed字段,否则点击排序会报错 for (var i = 0; i < param.cols.length; i++) { for (var j = 0; j < param.cols[i].length; j++) { if (param.cols[i][j].templet && !param.cols[i][j].field) { param.cols[i][j].field = txFieldPre + i + '_' + j; } } } if (param.url) { // url方式 var xParam = tableX.deepClone(param); xParam.data = [], xParam.url = ''; insTb = table.render(xParam); // 先渲染表格结构 // 提供刷新方法 insTb.reloadUrl = function (p) { var reParam = tableX.deepClone(param); p && (reParam = $.extend(reParam, p)); var loadIndex = layer.msg('加载中..', {icon: 16, shade: 0.01, time: 0}); tableX.loadUrl(reParam, function (data) { // 获取url数据 layer.close(loadIndex); tableX.parseTbData(reParam.cols, data); // 解析temple列 tableX.putTbData(tableId, data); // 缓存数据 $('input[' + tbSearchAttr + '="' + tableId + '"]').val(''); // 清空搜索输入框 window.tbX.cacheSearch[tableId] = undefined; // 重置搜索结果 insTb.reload({url: '', data: data, page: {curr: 1}}); }); }; // 请求数据 var loadIndex = layer.msg('加载中..', {icon: 16, shade: 0.01, time: 0}); tableX.loadUrl(param, function (data) { // 获取url数据 layer.close(loadIndex); tableX.parseTbData(param.cols, data); // 解析temple列 tableX.putTbData(tableId, data); // 缓存数据 insTb.reload({url: '', data: data, page: {curr: 1}}); }); tableX.renderAllTool(insTb); // 渲染工具组件 } else { tableX.parseTbData(param.cols, param.data); // 解析temple列 tableX.putTbData(tableId, param.data); // 缓存数据 insTb = table.render(param); // 渲染表格 tableX.renderAllTool(insTb); // 渲染工具组件 // 提供刷新的方法 insTb.reloadData = function (p) { insTb.reload(p); tableX.parseTbData(param.cols, p.data); // 解析temple列 tableX.putTbData(tableId, p.data); $('input[' + tbSearchAttr + '="' + tableId + '"]').val(''); // 清空搜索输入框 window.tbX.cacheSearch[tableId] = undefined; // 重置搜索结果 }; } return insTb; }, // 渲染所有组件 renderAllTool: function (insTb) { renderRefresh(insTb); // 刷新 renderFrontSort(insTb); // 排序 renderFrontSearch(insTb); // 搜索 renderExport(insTb); // 导出 }, // 加载表格数据 loadUrl: function (options, callback) { // 响应数据的自定义格式 options.response = $.extend({ statusName: 'code', statusCode: 0, msgName: 'msg', dataName: 'data', countName: 'count' }, options.response); var request = options.request, response = options.response, params = {}; var data = $.extend(params, options.where); // 参数 if (options.contentType && options.contentType.indexOf("application/json") == 0) { data = JSON.stringify(data); // 提交 json 格式 } $.ajax({ type: options.method || 'get', url: options.url, contentType: options.contentType, data: data, dataType: 'json', headers: options.headers || {}, success: function (res) { // 如果有数据解析的回调,则获得其返回的数据 if (typeof options.parseData === 'function') { res = options.parseData(res) || res; } // 检查数据格式是否符合规范 if (res[response.statusName] != response.statusCode) { var msgText = res[response.msgName] || ('返回的数据不符合规范,正确的成功状态码 (' + response.statusName + ') 应为:' + response.statusCode); layer.msg(msgText, {icon: 2}); } else { callback(res[response.dataName]); } }, error: function (e, m) { layer.msg('数据接口请求异常:' + m, {icon: 2}); } }); }, // 解析数据表格templet列 parseTbData: function (cols, dataList, overwrite) { var templets = []; // 需要解析的列 table.eachCols(undefined, function (i, item) { if (item.templet) { var one = {field: ((item.field && (overwrite || item.field.indexOf(txFieldPre) == 0)) ? item.field : ('txField_' + i))}; if (typeof item.templet === 'string') { one.templet = function (d) { // templet列使用laytpl渲染 var rsStr = undefined; laytpl($(item.templet).html()).render(d, function (html) { rsStr = html; }); return rsStr; } } else { one.templet = item.templet; } templets.push(one); } }, cols); for (var i = 0; i < dataList.length; i++) { var current = dataList[i]; for (var j = 0; j < templets.length; j++) { var htmlStr = '