1. 程式人生 > >ajax請求資料,生成Bootstrap-table

ajax請求資料,生成Bootstrap-table

**_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        
		});
	}
}