springboot里结合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 '
' + d.title + '
';
}
});
}
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 表格组件实现了表格的动态列和数据加载，根据用户选择的条件来过滤数据，并在表格上做了一些样式标记，以提升用户体验。