記錄bootstraptable解析json格式的二級或多級數組及顯示 （java+jsp+js）

首先，理清思路，我們的目標：在bootstrap上顯示後臺回傳的json數據裏的多級數組。

這裏的步驟可以大致分爲：一、在後套controller中寫好方法，向前臺return一個JSONString

二、在前臺jsp中，使用ajax接收後臺數據

$.ajax({
            type: "post",
            url: projectName + '/sensors/mobile/getHistoryList',
            dataType: "json",
            async: true,
            success: function (data) {
                if (data == "loginError") {
                    alert("用戶校驗失敗！");
                    window.location.href = "/power/sensors/mobile/loginpage";
                }
                // console.log(data);
                var obj = JSON.parse(data);
                console.log(obj);

三、在Google console中看到回傳數據爲完整的json格式

四、在bootstraptable中添加各種配置，並開始渲染表格

$('#table').bootstrapTable({
                    data: obj, //數據源
                    method: "get", //使用get請求到服務器獲取數據
                    striped: true, //表格顯示條紋
                    cache: false,
                    datatype: 'json',
                    pagination: true, //是否分頁
                    pageSize: 10, //每頁顯示的記錄數
                    sidePagination: "client",
                    pageNumber:1, //當前第幾頁
                    search: true, //是否可以查詢
                    smartDisplay:false,
                    pageList: [5, 10, 15, 20, 25], //記錄數可選列表

五、配置完畢，在columns的formatter中添加查詢參數

columns: [
                        {
                            field: 'siteCode',
                            title: '站點名',
                            align : 'center',
                            valign: 'middle',
                            sortable:true
                        },
                        {
                            field: 'nodeName',
                            title: '溫度節點名',
                            align : 'center',
                            valign: 'middle',
                            sortable:true,
                            formatter : function(value,row, index){
                                return row.themoNodeList[0].nodeName;
                            }
                         },
                        {
                            field: 'sensorValue',
                            title: '溫度值',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,
                            formatter: function (value, row, index) {
                                
                                if (row.themoNodeList[0].sensorSet[0].sensorType == "THEMO_SENSOR_METER") {
                                    if(row.themoNodeList[0].sensorSet[0].sensorValue == null)
                                    {
                                        return "no data";
                                    }
                                    return row.themoNodeList[0].sensorSet[0].sensorValue;
                                } else {
                                    if(row.themoNodeList[0].sensorSet[1].sensorValue == null)
                                    {
                                        return "no data";
                                    }
                                    return row.themoNodeList[0].sensorSet[1].sensorValue;
                                }
                            }
                        }]

六、最後table上便會顯示出我們想要的數據，其他表格配置可自行查閱官方文檔。

https://examples.bootstrap-table.com/index.html#view-source

隨手記錄，理解回傳數據格式與配置名之間的關係，繞了許多彎路，最後才發現解決方法其實很簡單，用心點用心點用心點！！！！