使用easyUI從後臺獲取欄位，前臺動態繫結

如下圖效果，表頭小區動態載入，如果沒有賣出商品，就不顯示，並且表頭下方分欄顯示

後臺使用c#，Java程式碼也可以參考

不多說，直接上程式碼

html

<table id="PayReport" class="easyui-datagrid" style="width:auto;" toolbar="#toolbar"></table>

js

function QueryReportData() {
	// 欄位陣列
	var rowOne = [];	// 第一行
	var rowTwo = [];	// 第二行
	// 請求獲取欄位
	$.getJSON("url?param=1"), function (res) {
		if (res.result == 1) {
			// 取出data
			var jsonData = res.data;
			for (var i = 0; i < jsonData.length; i++) {
				for (var j = 0; j < jsonData[i].length; j++) {
					var col = {};
					col['title'] = jsonData[i][j].title;
					col['field'] = jsonData[i][j].field;
					col['rowspan'] = jsonData[i][j].rowspan;
					col['colspan'] = jsonData[i][j].colspan;
					col['align'] = jsonData[i][j].align;
					if (i == 0) {
						rowOne.push(col);
					} else {
						rowTwo.push(col);
					}
				}
			}
			// 繫結資料
			$("#PayReport").datagrid({
				emptyMsg: "未找到記錄！",
				url: "url?param=2"),
				method: "get",
				loadMsg: '正在努力為您載入資料...',
				columns: [rowOne, rowTwo],
				iconCls: 'icon-chart_pie_add',// 圖示
				rownumbers: true,// 如果為true，則顯示一個行號列。
				singleSelect: true,// 如果為true，則只允許選擇一行。
				autoRowHeight: false,//定義設定行的高度，根據該行的內容。設定為false可以提高負載效能。
				nowrap: false,// 如果為true，則在同一行中顯示資料。設定為true可以提高載入效能。
				fit: false,// datagrid自適應寬高				
			});
		}
	});
}
 

後臺c#

public void getRequest(HttpContext context) 
{
	// 獲取引數
	var paramstr = context.Request["param"];
	switch() {
		case 1:
			// 獲取表頭
			// 獲取小區資訊 服務層和持久層就不展示了
			List<CommunityInfoEntity> list = service.GetMallReportForCommunity(param);
			if (list.Count > 0)
			{
				// 欄位集合 Java中用List<Map<String, Object>> list = new ArrayList<>();
				List<List<Dictionary<string, object>>> column = new List<List<Dictionary<string, object>>>();
				// 第一行欄位
				List<Dictionary<string, object>> listOne = new List<Dictionary<string, object>>();
				// 第二行欄位
				List<Dictionary<string, object>> listTwo = new List<Dictionary<string, object>>();
				// 欄位項 Java中就用Map<String, Object> map = new LinkedHashMap<>();
				Dictionary<string, object> dic = new Dictionary<string, object>();
				// 商品欄位
				dic.Add("field", "GoodName");
				dic.Add("title", "商品");
				dic.Add("align", "left");
				// 兩行一列
				dic.Add("rowspan", 2);
				dic.Add("colspan", 1);
				listOne.Add(dic);

				// 迴圈小區欄位，建立小區統計項
				list.ForEach(ce =>
				{
					// 小區欄位
					dic = new Dictionary<string, object>();
					dic.Add("field", "");
					dic.Add("title", ce.CommunityName);	// 欄位名稱為小區名稱
					// 一行兩列
					dic.Add("rowspan", 1);
					dic.Add("colspan", 2);
					dic.Add("align", "center");
					listOne.Add(dic);
					// 商品銷售數量
					dic = new Dictionary<string, object>();
					dic.Add("field", ce.CommunityName + "OrderCount");	// 欄位名稱為 小區名稱+數量，在查資料的時候也需要將名稱命名為一樣的
					dic.Add("title", "銷售數量");
					dic.Add("align", "left");
					// 一行一列
					dic.Add("rowspan", 1);
					dic.Add("colspan", 1);
					listTwo.Add(dic);
					// 商品銷售金額
					dic = new Dictionary<string, object>();
					dic.Add("field", ce.CommunityName + "OrderPayAmount"); // 欄位名稱為 小區名稱+數量，在查資料的時候也需要將名稱命名為一樣的
					dic.Add("title", "銷售金額");
					dic.Add("align", "left");
					// 一行一列
					dic.Add("rowspan", 1);
					dic.Add("colspan", 1);
					listTwo.Add(dic);
				});
				column.Add(listOne);
				column.Add(listTwo);
				// 使用json返回，自己封裝json工具
				return JsonConvert.SerializeObject(new { result = 1, data = column }, Newtonsoft.Json.Formatting.Indented);
			}
			else {
				return JsonConvert.SerializeObject(new { result = 0, data = "暫無資料" }, Newtonsoft.Json.Formatting.Indented);
			}
			break;
		case 2:
			// 獲取資料
			// 獲取小區資訊，通過小區資訊來確定查出來的資料的多少，如果只有兩個，那頁面也就顯示兩個小區
			List<CommunityInfoEntity> community = service.GetMallReportForCommunity(param);
			if (community.Count > 0)
			{
				// 返回小區的json，查出來的欄位名稱要與表頭欄位名稱一致，具體的服務層和持久層就不展示了
				return service.GetMallOutOrderReport(param, community);
			} else
			{
				return JsonConvert.SerializeObject(new { result = 0, data = "" }, Newtonsoft.Json.Formatting.Indented);
			}
			break
	}
}