LayUi动态列添加
1、先通过AJAX回调来确定启用哪个render
2、字段用push()追加
`
layui.config({
version: '2019080104' //为了更新 js 缓存，可忽略
});
var listComp = {
active: null,
getFilterParams: null
};
layui.use(['laypage', 'layer', 'table', 'element', 'laydate', 'form'], function () {
var laypage = layui.laypage//分页
, layer = layui.layer //弹层
, table = layui.table
, form = layui.form
, $ = layui.$
, element = layui.element //元素操作
, laydate = layui.laydate;
var listTable;
var listTable_map;
var str = [
{
type: 'numbers', title: '序号', align: 'center', width: 40, fixed: true, templet: function (d) {
return d.LAY_INDEX;
}
},
{
field: 'schoolName', title: '学校名', minWidth: 150, align: 'center', fixed: true
},
{
field: 'gradeName', title: '年级', minWidth: 120, align: 'center', fixed: true
},
{
field: 'name', title: '班级', minWidth: 120, align: 'center', fixed: true
},
{
field: 'studentName', title: '学生姓名', minWidth: 120, align: 'center', fixed: true
},
{
field: 'phone', title: '手机号码', minWidth: 120, align: 'center'
}
var str_final = [
{
type: 'numbers', title: '序号', align: 'center', width: 40, fixed: true, templet: function (d) {
return d.LAY_INDEX;
}
},
{
field: 'schoolName', title: '学校名', minWidth: 150, align: 'center', fixed: true
},
{
field: 'gradeName', title: '年级', minWidth: 120, align: 'center', fixed: true
},
{
field: 'name', title: '班级', minWidth: 120, align: 'center', fixed: true
},
{
field: 'studentName', title: '学生姓名', minWidth: 120, align: 'center', fixed: true
},
{
field: 'phone', title: '手机号码', minWidth: 120, align: 'center'
}, {
field: 'paidStatus',
title: '状态',
minWidth: 100,
align: 'center',
fixed: 'right',
templet: function (d) {
if (d.paidStatus === '已缴费') {
return '<span style="color:#22a375">已缴费</span>';
} else {
return '<span style="color: red">未交费</span>';
}
}
}]
function loadTable(firstPage) {
var params = getFilterParams();
params['page'] = 1
params['limit'] = 1
ajaxGet($, ROOT_PATH + "aggr/comparison/list", params, function (res) {
var data = res && res[0]
var map_len = !data ? -1 : Object.getOwnPropertyNames(res[0].goodsMap).length
if (map_len > 0) {
if (!listTable) {
//执行一个 table 实例
var isFirst = true
var isEmpty = null
listTable = table.render({
elem: '#list_table'
, url: ROOT_PATH + '/aggr/comparison/list' //数据接口
, method: 'get'
, where: getFilterParams()
// , height: 'full-220'
, cellMinWidth: 80
, limit: 10
, page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
prev: '上一页',
next: '下一页',
theme: 'pager'
}
, cols: [str]
, parseData: function (res) {
// var ss = Object.getOwnPropertyNames(res[0].goodsMap).length
$.each(res.data, function (i, v) {
$.each(Object.keys(v.goodsMap), function (i2, v2) {
if (i === 0) {
str.push({
field: v2, title: v2, minWidth: 200, align: 'center',
templet: function (d) {
var value = d.goodsMap[v2]
if (d.paidStatus === '已缴费') { // 未交费的不显示
if (value > 0) {
return '<span style="color:red">' + value + '</span>';
} else {
return '';
}
} else {
return ''
}
}
});
}
})
});
str.push({
field: 'paidStatus',
title: '状态',
minWidth: 100,
align: 'center',
fixed: 'right',
templet: function (d) {
if (d.paidStatus === '已缴费') {
return '<span style="color:#22a375">已缴费</span>';
} else {
return '<span style="color: red">未交费</span>';
}
}
})
}, done: function () {
if (isFirst || isEmpty) {
listTable.reload()
isFirst = false
}
}
});
} else {
var params = {
where: getFilterParams()
};
if (firstPage) {
params.page = {curr: 1};
}
listTable.reload(params);
}
} else {
if (!listTable_map) {
//执行一个 table 实例
var isFirst = true
var isEmpty = null
listTable_map = table.render({
elem: '#list_table'
, url: ROOT_PATH + '/aggr/comparison/list' //数据接口
, method: 'get'
, where: getFilterParams()
// , height: 'full-220'
, cellMinWidth: 80
, limit: 10
, page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
prev: '上一页',
next: '下一页',
theme: 'pager'
}
, cols: [str_final]
});
} else {
var params = {
where: getFilterParams()
};
if (firstPage) {
params.page = {curr: 1};
}
listTable_map.reload(params);
}
}
})
}
//分页
laypage.render({
elem: 'pageDemo' //分页容器的id
, count: 100 //总页数
, skin: '#1E9FFF' //自定义选中色值
//, skip: true //开启跳页
, jump: function (obj, first) {
if (!first) {
layer.msg('第' + obj.curr + '页');
}
}
});
function getFilterParams() {
var params = {};
var $inputs = $('#query-form input,select');
$.each($inputs, function (i, el) {
var $el = $(el),
value = $el.val(),
key = $el.attr('name');
if (key) {
if (value !== '') {
params[key] = value
} else {
params[key] = '';
}
}
});
return params;
}
//事件
var active = {
select: function (firstPage) {
loadTable(firstPage);
}, reset: function () {
setTimeout(function () {
active.select(true);
}, 50);
}, export: function () {
ajaxGet($, ROOT_PATH + 'aggr/comparison/export', getFilterParams(), function (data) {
location.href = data;
})
}, importClazz: function () {
importClazz();
}
};
$('.select .layui-btn').on('click', function () {
var type = $(this).data('type');
if (type === 'select') {
active.select(true);
} else {
active[type].call(this);
}
});
$('.action .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type].call(this);
});
function importClazz() {
var inputClassLayer = $('#inputClassLayer');
layer.open({
type: 1
, area: ['500px', '350px']
, title: '导入班级'
, content: inputClassLayer
, btn: ['确定', '取消']
, success: function () {
}
, yes: function (index) {
$("#import_form_class").find("#classInputSubmit").click();
}, btn2: function () {
}
})
}
function showMsgTable(errorList) {
var html = '<table class="layui-table" style="margin: 0">';
html += '<thead><tr><th>记录</th><th style="width: 400px">失败原因</th></tr></thead>';
$.each(errorList, function (k, msg) {
var colsStr = '';
for (var key in msg) {
if (key !== 'errorInfo') {
colsStr += key + ":" + msg[key] + " ";
}
}
colsStr = colsStr.substring(0, colsStr.length - 1);
html += '<tr><td>' + colsStr + '</td><td>' + msg.errorInfo + '</td></tr>';
});
html += '</table>';
layer.open({
type: 1,
title: false,
area: ['900px', '450px'],
content: html
});
}
form.on('submit(classInputSubmit)', function () {
var loadIndex = layer.load();
$('#import_form_class').ajaxSubmit({
url: ROOT_PATH + '/aggr/comparison/importClass',
success: function (result) {
if (!result.success) {
if (!result.data) {
layer.msg("上传的文件有误，请重新下载模板");
layer.close(loadIndex);
return false;
}
if (!result.data.errorList) {
layer.msg(result.message);
layer.close(loadIndex);
return false;
}
showMsgTable(result.data.errorList);
layer.close(loadIndex);
return false;
}
layer.closeAll();
layer.msg("导入成功");
window.location.reload(true);
},
error: function (res) {
layer.close(loadIndex);
layer.msg(res.responseJSON.error);
}
});
return false;
});
form.on('select(school)', function (data) {
//根据学校加载年级
ajaxGet($, ROOT_PATH + 'grade/listBySchoolId', {schoolId: data.value}, function (res) {
var html = '<option value="">全部</option>';
;
$.each(res, function (index, item) {
html += '<option value="' + item.id + '" data-name="' + item.fullName + '">' + item.fullName + '</option>'
});
$('#grade_sel').html(html);
form.render('select');
});
});
function init() {
//日期
laydate.render({
elem: '#start_time'
});
laydate.render({
elem: '#end_time'
});
loadTable();
// 加载学校列表
ajaxGet($, ROOT_PATH + 'aggr/comparison/listAllStoreSchool', function (res) {
var html = '<option value="">全部</option>';
$.each(res, function (index, item) {
html += '<option value="' + item.id + '">' + item.name + '</option>'
});
$('#school_sel').html(html);
form.render('select');
});
}
listComp.getFilterParams = getFilterParams;
init();
});`
