js代碼

var $ = layui.$, active = {
            reload: function(){
                //處理人的選擇
                var handler = $('#handler input[name="handler"]:checked ').val()//獲取選中的值
                var systemNo;
                var systemType;
                //判斷當(dāng)前是常用還是全部（全部的話，a標(biāo)簽的值為常用）
                if($("#changeSystem").text() == "全部"){
                    systemNo = tagIns2.selected;
                    systemType = 2;
                }else{
                    systemNo = tagIns1.selected;
                    systemType = 1;
                }
                //將頁面全部復(fù)選框選中的值拼接到一個(gè)數(shù)組中
                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();//系統(tǒng)別
                var factory = $('#factory option:selected').val();//廠別
                var priority = $('#priority option:selected').val();//優(yōu)先級
                var workNo = $('#workNo').val();//作業(yè)編號
                var applier = $('#applier').val();//申請人
                var content = $('#content').val();//標(biāo)題/描述
                var department = $('#department').val();//申請部門
                var createDate = $('#test1').val();//申請日期
                var status = $("#status").val();//狀態(tài)
                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' : '優(yōu)先級',
                    'status' : '狀態(tài)',
                    'system' : '系統(tǒng)別',
                    'taskNo' : '作業(yè)編號',
                    'questionType' : '問題類型',
                    'applier' : '申請人工號',
                    'trueName' : '申請人姓名',
                    'createDateTime' : '申請時(shí)間',
                    'handler' : '處理人工號',
                    'handlerName' : '處理人姓名',
                    'handDateTime' : '上一次處理時(shí)間',
                    'updater' : '更新人工號',
                    'updaterName' : '更新人姓名',
                    'updaterDateTime' : '更新日期',
                    'planDate':'預(yù)計(jì)完成時(shí)間',
                    'updateDateTime':'結(jié)案時(shí)間',
                    'parentQuestionId':'問題對應(yīng)的父任務(wù)ID',
                    'childQuestionIds':'子任務(wù)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: '優(yōu)先級', sort: true,width: 80, style: 'font-size: 12px;'});
                    }
                    if (table_col[i] == 'status') {
                        array_col.push({
                            field: 'status', title: '狀態(tài)', 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 "已回復(fù)";
                                } else if (e.status == "4") {
                                    return "結(jié)案";
                                } else if (e.status == "5") {
                                    return "取消問題";
                                } else if (e.status == "9") {
                                    return "刪除";
                                }
                            }
                        });
                    }
                    if (table_col[i] == 'system') {
                        array_col.push({
                            field: 'system',
                            title: '系統(tǒng)別',
                            sort: true,
                            width: 90,
                            style: 'font-size: 12px;'
                    })
                        ;
                    }
                    if (table_col[i] == 'taskNo') {
                        array_col.push({
                            field: 'taskNo',
                            title: '作業(yè)編號',
                            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: '申請時(shí)間',
                            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: '上一次處理時(shí)間',
                            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: '預(yù)計(jì)完成時(shí)間',
                            sort: true,
                            width: 120,
                            style: 'font-size: 12px;'
                    })
                        ;
                    }
                    if (table_col[i] == 'updateDateTime') {
                        array_col.push({
                            field: 'updateDateTime',
                            title: '結(jié)案時(shí)間',
                            sort:true,
                            width: 120,
                            style: 'font-size: 12px;'
                    })
                        ;
                    }
                    if(table_col[i] == 'parentQuestionId') {
                        array_col.push({
                            field: 'parentQuestionId',
                            title: '問題對應(yīng)的父任務(wù)ID',
                            sort: true,
                            width: 120,
                            style: 'font-size: 12px;'
                        });
                    }
                    if(table_col[i] == 'childQuestionIds') {
                        array_col.push({
                            field: 'childQuestionIds',
                            title: '子任務(wù)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");
                            }
                        });
                    }
                });
            },

解釋分析：

這段代碼主要實(shí)現(xiàn)了一個(gè)前端的數(shù)據(jù)表格展示功能，使用了 layui 的表格組件進(jìn)行渲染。以下是對代碼的解釋：

首先，定義了一個(gè)名為 active 的對象，其中包含了一個(gè)方法 reload，這個(gè)方法用于重新加載數(shù)據(jù)表格，并且根據(jù)用戶選擇的條件進(jìn)行數(shù)據(jù)篩選和顯示。

reload 方法內(nèi)部執(zhí)行了數(shù)據(jù)表格的重新加載操作，使用 table.reload 方法實(shí)現(xiàn)。table.reload 是 layui 表格組件提供的方法，用于重新加載數(shù)據(jù)表格，可以傳入?yún)?shù)來控制表格的數(shù)據(jù)來源、頁碼等。

在 reload 方法內(nèi)部，首先獲取用戶選擇的各種查詢條件，比如 handler、systemNo、factory 等等。

然后，通過遍歷 table_json 對象，根據(jù)用戶選擇的列信息 cols，構(gòu)造 array_col 數(shù)組，用于設(shè)置表格的列頭信息。

在遍歷 table_col 數(shù)組時(shí)，根據(jù)每個(gè)元素的值，判斷當(dāng)前列是否為 “id”、“title”、“priority” 等，如果是，則添加相應(yīng)的列信息到 array_col 數(shù)組中。

完成 array_col 數(shù)組的構(gòu)造后，使用 table.reload 方法重新加載數(shù)據(jù)表格，并傳入相應(yīng)的參數(shù)。

table.reload 方法的 url 參數(shù)指定了數(shù)據(jù)的來源地址，即請求后端接口 /admin/receiveQuestion/list 來獲取數(shù)據(jù)。

cols 參數(shù)用于指定表格的列頭信息，即使用 array_col 數(shù)組構(gòu)造的表格列頭。

where 參數(shù)用于傳遞查詢條件給后端，在這里，將前端獲取到的各種查詢條件傳遞給了后端接口。

done 參數(shù)是一個(gè)回調(diào)函數(shù)，在數(shù)據(jù)表格加載完畢后，會執(zhí)行這個(gè)回調(diào)函數(shù)。在這個(gè)函數(shù)內(nèi)部，對表格的數(shù)據(jù)進(jìn)行遍歷，并根據(jù)返回的 res 數(shù)據(jù)中的 param_1 數(shù)組中的數(shù)據(jù)，對表格的每一行進(jìn)行顏色標(biāo)記。

總體來說，這段代碼實(shí)現(xiàn)了一個(gè)功能較為復(fù)雜的數(shù)據(jù)表格展示頁面，通過 layui 表格組件實(shí)現(xiàn)了表格的動態(tài)列和數(shù)據(jù)加載，根據(jù)用戶選擇的條件來過濾數(shù)據(jù)，并在表格上做了一些樣式標(biāo)記，以提升用戶體驗(yàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-603085.html

到了這里，關(guān)于springboot里結(jié)合layui對表格數(shù)據(jù)的一些記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！