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

猜你喜欢

转载自blog.csdn.net/LaOngDaoxing/article/details/83822207