easyUI Datagrid 动态设置表头、获取数据、格式化数据、编辑数据并保存

效果图：

1. 首先分析easyUI Datagrid 的columns 属性:
   [[{
   title: ‘字段名称’,
   field: ‘name’,
   width: 160,
   rowspan: 2,
   align: ‘center’,
   sortable: true
   }, {
   title: ‘字段名称’,
   field: ‘des1’,
   width: 120,
   colspan: 3,
   align: ‘center’,
   sortable: true
   }],
   [{
   title: ‘字段名称’,
   field: ‘des2’,
   width: 40,
   align: ‘center’,
   sortable: true
   }]]

2. 根据上面的数据构建实体类 ColumnInfo：

   private String field;
          	// 表头名字
          	private String title;
          	// 单元格宽度
          	private int width;
          	// 合并行
          	private int rowspan;
          	// 合并列
              	private int colspan;
              	// 对齐方式
              	private String align;
              	// 单元格的格式化函数
              	private String formatter;
              	// 允许被排序
              	private boolean sortable;
              	// 是否隐藏
              	private boolean hidden;
              	// 编辑
              	private Map<String, Object> editor;

3. 在controller中根据上面的数据进行组装表头：

// 获取表头
	@RequestMapping(value = { "getHeader" }, method = RequestMethod.POST)
	@ResponseBody
	public List<List<ColumnInfo>> getHeader() {
		List<ColumnInfo> columnInfoList = new ArrayList<>();
		int index = 1;
		// 该方法时查询出要组装的title
		List<VipLevelInfo> vipLevelInfoList = vipLevelInfoService.getHeader(); 
		for (VipLevelInfo vipLevelInfo : vipLevelInfoList) {
			Map<String, Object> editor = getEditoe();
			// "levelName" + index  有规律的定义field
			ColumnInfo columnInfo = setColumnInfo("levelName" + index, vipLevelInfo.getLevelName(),80,false,"",editor);
			columnInfoList.add(columnInfo);
			index++;
		}
		List<List<ColumnInfo>> headerList = new ArrayList<>();
		headerList.add(columnInfoList);
		return headerList;
	}



	private ColumnInfo setColumnInfo(String field, String title,Integer width,boolean hidden,String formatter,Map<String, Object> editor) {
		ColumnInfo columnInfo = new ColumnInfo();
		columnInfo.setTitle(title);
		columnInfo.setField(field);
		columnInfo.setAlign("center");
		columnInfo.setWidth(width);
		columnInfo.setColspan(0);
		columnInfo.setRowspan(0);
		columnInfo.setSortable(false);
		columnInfo.setFormatter(formatter);
		columnInfo.setHidden(hidden);
		columnInfo.setEditor(editor);
		return columnInfo;
	}

	//  获取editor属性
	private Map<String, Object> getEditoe() {
	//  "editor": { "type": "combobox", "options":{ "data": [{ "value": "0", "text": "否" }, { "value": "1", "text": "是" }] , "valueField": "value", "textField": "text" } }},';
		Map<String, Object> editor = new HashMap<>();
		editor.put("type", "combobox");
		Map<String, Object> options = new HashMap<>();
		
		List<Map<String, Object>> dataList = new ArrayList<>();
		Map<String, Object> data1 = new HashMap<>();
		data1.put("value", "0");
		data1.put("text", "否");
		Map<String, Object> data2 = new HashMap<>();
		data2.put("value", "1");
		data2.put("text", "是");
		dataList.add(data1);
		dataList.add(data2);
		
		options.put("data", dataList);
		options.put("valueField", "value");
		options.put("textField", "text");
		
		editor.put("options", options);
		return editor;
	}

4. 页面请求
   显示位置
   
   引入的文件：
   

js代码：

$(function() {
	initDatagrid();//初始化，dataGrid
});
function initDatagrid() {
	var editRow = undefined;
	$.ajax({
		url : "<%=request.getContextPath()%>/vip/getHeader", //获取表头
		type : "POST",
		contentType : "application/json",
		dataType : "json",
		data : {
			
		},
		error : function(response) {
			console.log("获取表头失败！");
		},
		success : function(columns) {
			// 该方法为添加  formatter 属性
			for(var j in columns){
		        var d = columns[j];
		        for(var i in d){
		            if(d[i].formatter =="undefined"){
		                delete d[i].formatter;
		            }else{
		                d[i].formatter  = function(val,row,index){
		                	if(val == "0"){
		                		return "<span style='color: red'>&chi;</span>";
		                	}else if(val=='1'){
		                		return "<span style='color: blue '>&radic;</span>";
		                	}else{
		                		return "<span style='color: red'>&chi;</span>";
		                	}
		                }
		            }                           
		        }
		    }                
			
			$("#roleGrid").datagrid({
				title:"vip权益信息列表",
		    	emptyMsg : "没有记录",
				rownumbers : true,
		        singleSelect: true,
		        pagination: true,
		        singleSelect : true,
		        idField: "datainfoId",
		        fit:true,
		        toolbar : '#tb',
				columns : columns,
		          onDblClickRow: function (rowIndex, rowData) {
		          // 双击进行修改
		            if (editRow != undefined) {
		              $("#roleGrid").datagrid('endEdit', editRow);
		            }
		       
		            if (editRow == undefined) {
		              $("#roleGrid").datagrid('beginEdit', rowIndex);
		              editRow = rowIndex;
		            } 
		            
		          },
		          onClickRow: function (rowIndex, rowData) {
		          // 单击进行保存
		            if (editRow != undefined) {
						$("#roleGrid").datagrid('endEdit', editRow);
						updateDatagrid(editRow);
						editRow = undefined;
		            } 
		       
		          }

			});

			getDataGridData();//加载数据
			//$("#roleGrid").datagrid("loadData", msg.rows);  //动态取数据
		}
	});
	
	function updateDatagrid(editRow) {
		var rows = $('#roleGrid').datagrid('getRows');
		var entities = "";
		entities = JSON.stringify(rows[editRow]);
		console.info(entities);
		$.ajax({
			url: "<%=request.getContextPath()%>/vip/save",
			type: 'POST',
			async: true,
			dataType: 'json',
			data: {
				'entities': entities
			},
			success: function(data) {
				if(data.message == 'success') {
					alert(data.message);
				} else {
					alert(data.message);
					return;
				}
				$('#roleGrid').datagrid('reload'); 
			}
		});
	}

	function getDataGridData() {
		$.ajax({
			url : "<%=request.getContextPath()%>/vip/getData",
			type : "POST",
			contentType : "application/json",
			dataType : "json",
			data : {
				
			},
			error : function(response) {
				console.log("error");
			},
			success : function(data) {
				$("#roleGrid").datagrid({
					data : data
				})
			}
		})
	}
}