记录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

随手记录，理解回传数据格式与配置名之间的关系，绕了许多弯路，最后才发现解决方法其实很简单，用心点用心点用心点！！！！