ajax請求資料,生成Bootstrap-table
阿新 • • 發佈:2018-11-09
**_Menthod1.js
$(function(){ var shebeiId="GPRS_TEST"; var startTime=$("#startTimePart").val() + ':00'; var endTime=$("#endTimePart").val() + ':00 '; oneJsTest.reqShebeiDataByShebeiAndTimePart(shebeiId,startTime,endTime); }); var oneJsTest={ /** * 根據裝置號、起始時間,請求後臺資料,並生成表格 */ reqShebeiDataByShebeiAndTimePart:function(shebeiIdParam,startTimeParam,endTimeParam){ $.ajax({ type: "POST", url:G.contextPath + '/live/listShebeDataByShebeiAndTime.do', data:{shebeiId:shebeiIdParam,startTime:startTimeParam,endTime:endTimeParam}, dataType: "json", success: function(data){ oneJsTest.createShebeiDataTablePart(data.shebeiData); } }); }, /** * 生成固定表頭表格 */ createShebeiDataTablePart:function(data){ $('#shuzhi_row_quxian_tb').bootstrapTable('destroy').bootstrapTable({ data:data, height:640, striped: true, // 是否顯示行間隔色 cache: false, // 是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) //pagination: true, //是否顯示分頁(*) sortOrder: "asc", //排序方式 uniqueId:"jlh", sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber:1, //初始化載入第一頁,預設第一頁 pageSize: 6, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) paginationPreText: "上一頁", paginationNextText: "下一頁", clickToSelect: true, //是否啟用點選選中行 gridview: true, //加速顯示 columns:[{ field: 'rq', title: '日期',formatter:function(value,row,index){ return value.split(" ")[0]; } },{ field: 'rq', title: '時間',formatter:function(value,row,index){ return value.split(" ")[1]; } }, { field: 'turangShidu', title: '溼度' },{ field: 'wendu', title: '溫度' },{ field: 'guangzhaodu', title: '光照' }] }); }, }
**_Menthod2.js
$(function(){ }); var oneJsTest={ /** * 根據裝置號、起止時間、頁面表格Id、頁面圖表Id,ajax請求後臺資料,並生成表格 */ reqShebeiDataByShebeiAndTimePart:function(shebeiId,startTime,endTime,tableIds,chartIds){ $.ajax({ type: "POST", url:G.contextPath + '/live/listShebeDataByShebeiAndTime.do', data: { shebeiId: shebeiId, startTime: startTime + ':00', endTime: endTime + ':00', }, dataType: "json", success: function(data){ if(!data.shebeiData){ return; } var tabIdArr = tableIds.split(","); var chartIdArr = chartIds.split(","); var createTableColumn = oneJsTest.createTableColumn(data); for (var i = 0; i < tabIdArr.length; i++) { oneJsTest.createShebeiDataTablePart(tabIdArr[i],data.shebeiData,createTableColumn); commonChartSingle.createSingleChart(data.shebeiData,data.yaosuInfos,chartIdArr[i],760,304); } } }); }, /** * 根據後臺return的資料,即引數data,動態生成表格column表頭 */ createTableColumn:function(data){ var shebeiData = data.shebeiData; var yaosuInfos = data.yaosuInfos; if(!shebeiData || shebeiData.length==0){ return null; } var columnArr = []; var paichuKeys = "jlh,shebeiId"; var obj1 = shebeiData[0]; for (var key in obj1) { if(paichuKeys.indexOf(key)>=0){ continue; } if(key === "rq"){ var column1 = { field: 'rq', title: '日期',formatter:function(value,row,index){ return value.split(" ")[0]; } }; var column2 = { field: 'rq', title: '時間',formatter:function(value,row,index){ return value.split(" ")[1]; } }; columnArr.push(column1); columnArr.push(column2); continue; } var column = {}; for (var i = 0; i < yaosuInfos.length; i++) { var fieldName = yaosuInfos[i].fieldName; if(G_APP.firstCharToLowerCase(fieldName) == key){ column.field = key; column.title = yaosuInfos[i].showTitle; columnArr.push(column); } } } return columnArr; }, /** * 生成動態表頭表格 */ createShebeiDataTablePart:function(tableId,data,column){ $('#' + tableId).bootstrapTable('destroy'); if(!data || !column){ return; } $('#' + tableId).bootstrapTable({ data:data, height:200, striped: true, // 是否顯示行間隔色 cache: false, // 是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) //pagination: true, //是否顯示分頁(*) sortOrder: "asc", //排序方式 uniqueId:"jlh", sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber:1, //初始化載入第一頁,預設第一頁 pageSize: 6, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) paginationPreText: "上一頁", paginationNextText: "下一頁", clickToSelect: true, //是否啟用點選選中行 gridview: true, //加速顯示 columns:column }); } }