这段代码展示了如何使用layui前端框架的表格组件，根据用户选择的查询条件动态加载和筛选数据，包括处理各种查询参数、构造列头信息以及数据加载后的回调处理，如行颜色标记等。
js代码
var $ = layui.$, active = {
reload: function(){
//处理人的选择
var handler = $('#handler input[name="handler"]:checked ').val()//获取选中的值
var systemNo;
var systemType;
//判断当前是常用还是全部（全部的话，a标签的值为常用）
if($("#changeSystem").text() == "全部"){
systemNo = tagIns2.selected;
systemType = 2;
}else{
systemNo = tagIns1.selected;
systemType = 1;
}
//将页面全部复选框选中的值拼接到一个数组中
var arr_box = '';
$('input[type=checkbox]:checked').each(function() {
arr_box = arr_box+','+ $(this).val()
});
var name = $('#username').val();//会话人
//var systemNo = $('#systemNo option:selected').val();//系统别
var factory = $('#factory option:selected').val();//厂别
var priority = $('#priority option:selected').val();//优先级
var workNo = $('#workNo').val();//作业编号
var applier = $('#applier').val();//申请人
var content = $('#content').val();//标题/描述
var department = $('#department').val();//申请部门
var createDate = $('#test1').val();//申请日期
var status = $("#status").val();//状态
var system = "";
if (systemNo.length > 0) {
for (var i = 0; i < systemNo.length; i++) {
if(system == ""){
system = systemNo[i].name;
}else{
system = system+","+systemNo[i].name;
}
}
}else{
system = null;
}
var cols = $("#cols").val();
var table_json = {
'id':"序号",
'title' : '主题',
'priority' : '优先级',
'status' : '状态',
'system' : '系统别',
'taskNo' : '作业编号',
'questionType' : '问题类型',
'applier' : '申请人工号',
'trueName' : '申请人姓名',
'createDateTime' : '申请时间',
'handler' : '处理人工号',
'handlerName' : '处理人姓名',
'handDateTime' : '上一次处理时间',
'updater' : '更新人工号',
'updaterName' : '更新人姓名',
'updaterDateTime' : '更新日期',
'planDate':'预计完成时间',
'updateDateTime':'结案时间',
'parentQuestionId':'问题对应的父任务ID',
'childQuestionIds':'子任务ID列表'
};
//每次搜索就得清空table_col和重置array_col
table_col = [];
array_col = [{checkbox: true, fixed: true}, {title: '编辑', width: 80, toolbar: '#table_bar'}];
for(var obj in table_json){
var values = cols.split(",");
for(var i in values){
if(table_json[obj] == values[i]){
table_col.push(obj);
}
}
}
for(var i in table_col) {
if (table_col[i] == "id") {
array_col.push({field: 'id', title: '序号', width: 60, sort: true, style: 'font-size: 12px;', sort: true}
);
}
if (table_col[i] == 'title') {
array_col.push({
field: 'title', title: '主题', sort: true, width: 250, style: 'font-size: 12px;text-align:left;',
templet: function (d) {
return '<div style="text-align: left">' + d.title + '</div>';
}
});
}
if (table_col[i] == 'priority') {
array_col.push({field: 'priority', title: '优先级', sort: true,width: 80, style: 'font-size: 12px;'});
}
if (table_col[i] == 'status') {
array_col.push({
field: 'status', title: '状态', sort: true,width: 160, style: 'font-size: 12px;', templet: function (e) {
if (e.status == "0") {
return "未开始";
} else if (e.status == "1") {
return "已提问";
} else if (e.status == "2") {
return "已回复";
} else if (e.status == "4") {
return "结案";
} else if (e.status == "5") {
return "取消问题";
} else if (e.status == "9") {
return "删除";
}
}
});
}
if (table_col[i] == 'system') {
array_col.push({
field: 'system',
title: '系统别',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'taskNo') {
array_col.push({
field: 'taskNo',
title: '作业编号',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'questionType') {
array_col.push({
field: 'questionType',
title: '问题类型',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'applier') {
array_col.push({
field: 'applier',
title: '申请人工号',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'trueName') {
array_col.push({
field: 'trueName',
title: '申请人姓名',
sort: true,
width: 180,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'createDateTime') {
array_col.push({
field: 'createDateTime',
title: '申请时间',
sort: true,
width: 100,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'handler') {
array_col.push({
field: 'handler',
title: '处理人工号',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'handlerName') {
array_col.push({
field: 'handlerName',
title: '处理人姓名',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'handDateTime') {
array_col.push({
field: 'handDateTime',
title: '上一次处理时间',
sort: true,
width: 90,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'updater') {
array_col.push({
field: 'updater',
title: '更新人工号',
sort: true,
width: 100,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'updaterName') {
array_col.push({
field: 'updaterName',
title:'更新人姓名',
sort: true,
width: 100,
style: 'font-size: 12px;'
})
}
if (table_col[i] == 'updaterDateTime') {
array_col.push({
field: 'updaterDateTime',
title: '更新日期',
sort: true,
width: 120,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'planDate') {
array_col.push({
field: 'planDate',
title: '预计完成时间',
sort: true,
width: 120,
style: 'font-size: 12px;'
})
;
}
if (table_col[i] == 'updateDateTime') {
array_col.push({
field: 'updateDateTime',
title: '结案时间',
sort:true,
width: 120,
style: 'font-size: 12px;'
})
;
}
if(table_col[i] == 'parentQuestionId') {
array_col.push({
field: 'parentQuestionId',
title: '问题对应的父任务ID',
sort: true,
width: 120,
style: 'font-size: 12px;'
});
}
if(table_col[i] == 'childQuestionIds') {
array_col.push({
field: 'childQuestionIds',
title: '子任务ID列表',
sort: true,
width: 120,
style: 'font-size: 12px;'
});
}
}
var questionType = $("#questionType").val();
table.reload('table', {
url: '/admin/receiveQuestion/list',
page:{
curr:1//重新从第一页开始
},
cols:[array_col],
where: {
systemNo:system,
factory:factory,
priority:priority,
workNo:workNo,
applier:applier,
content:content,
department:department,
createDate:createDate,
name:name,
status:status,
arr:arr_box,
handler:handler,
systemType:systemType,
cols: cols,
questionType:questionType,
},
done:function(res, curr, count){
apitableFilterIns.reload();
console.log("table.reload的res:",res);
var arr = res.param_1;
var that = this.elem.next();
res.data.forEach(function (item, index) {
if(arr.indexOf(item.id)> -1){
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
tr.css("color", "#FF2D2D");
}
});
}
});
},
解释分析：
这段代码主要实现了一个前端的数据表格展示功能，使用了 layui 的表格组件进行渲染。以下是对代码的解释：
首先，定义了一个名为 active 的对象，其中包含了一个方法 reload，这个方法用于重新加载数据表格，并且根据用户选择的条件进行数据筛选和显示。
reload 方法内部执行了数据表格的重新加载操作，使用 table.reload 方法实现。table.reload 是 layui 表格组件提供的方法，用于重新加载数据表格，可以传入参数来控制表格的数据来源、页码等。
在 reload 方法内部，首先获取用户选择的各种查询条件，比如 handler、systemNo、factory 等等。
然后，通过遍历 table_json 对象，根据用户选择的列信息 cols，构造 array_col 数组，用于设置表格的列头信息。
在遍历 table_col 数组时，根据每个元素的值，判断当前列是否为 “id”、“title”、“priority” 等，如果是，则添加相应的列信息到 array_col 数组中。
完成 array_col 数组的构造后，使用 table.reload 方法重新加载数据表格，并传入相应的参数。
table.reload 方法的 url 参数指定了数据的来源地址，即请求后端接口 /admin/receiveQuestion/list 来获取数据。
cols 参数用于指定表格的列头信息，即使用 array_col 数组构造的表格列头。
where 参数用于传递查询条件给后端，在这里，将前端获取到的各种查询条件传递给了后端接口。
done 参数是一个回调函数，在数据表格加载完毕后，会执行这个回调函数。在这个函数内部，对表格的数据进行遍历，并根据返回的 res 数据中的 param_1 数组中的数据，对表格的每一行进行颜色标记。
总体来说，这段代码实现了一个功能较为复杂的数据表格展示页面，通过 layui 表格组件实现了表格的动态列和数据加载，根据用户选择的条件来过滤数据，并在表格上做了一些样式标记，以提升用户体验。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
