【开发笔记】基于EasyUI框架，实现table列的动态绑定

使用easyUI从后台获取字段，前台动态绑定

如下图效果，表头小区动态加载，如果没有卖出商品，就不显示，并且表头下方分栏显示

后台使用c#，Java代码也可以参考

不多说，直接上代码

html

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 list = service.GetMallReportForCommunity(param);
			if (list.Count > 0)
			{
				// 字段集合 Java中用List> list = new ArrayList<>();
				List>> column = new List>>();
				// 第一行字段
				List> listOne = new List>();
				// 第二行字段
				List> listTwo = new List>();
				// 字段项 Java中就用Map map = new LinkedHashMap<>();
				Dictionary dic = new Dictionary();
				// 商品字段
				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();
					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();
					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();
					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 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
	}
}