esay ui datagrid动态生成列

上菜：

前端代码分两步，第一步为获取动态列的列名；第二步为根据列名匹配数据值。

//先获取列数组
		var array =[];//存放columns属性
		var columns=[];//存放列名
		$.ajax({
	        url:'${pageContext.request.contextPath}/clue/getXmlData',//获取动态列的后台地址
	        type:'POST',
	        data:{
	        	xmlName : xmlName //我这里获取的动态列存在XML文件中，所以需要一个配置文件的名称
	        },
	        success:function(data){
			    $(data).each(function(){
			        array.push({field:'',title:'',width:''});
			     });
			     columns.push(array);
			     $(data).each(function(index,el){
				  columns[0][index]['field']= el['word'].toLocaleLowerCase();//列的对象名，用于与数据进行匹配
				  columns[0][index]['title']= el['word'];//列名
				  columns[0][index]['width']= "130";//列宽度
			     });

<span style="white-space:pre">			</span>     //从后台获取动态列的数据
			     $('#checkDataList').datagrid({
				     fit:true,
				     pagination:true,
				     rownumbers:true,
				     url:'${pageContext.request.contextPath}/clue/getOneData?uuId='+uuId +'&xmlName=' +xmlName,
				     singleSelect:true,
				     columns:columns
			     });
		  },
		  error : function(data){
			  alert(data.message);
		  },
		  dataType:'json'
	 });

后台代码：

<span style="white-space:pre">	</span>/**
	 * 获取对应的xml文件，读取xml文件并将文件中的字段转成json对象
	 * @param request
	 * @return
	 * @throws DocumentException 
	 */
	@RequestMapping("getXmlData")
	@ResponseBody
	public JSON getXmlData(HttpServletRequest request) {
		String path = (request.getSession().getServletContext().getRealPath("/")+ "WEB-INF/xmlFile/").replace("\\", "/");
		String xmlName = request.getParameter("xmlName");
		JSON object = null;
		//读取xml模板
		List<XmlData> xmlDatas = null;
		try {
			xmlDatas = readXmlService.getXmlFile(path + xmlName);
			object = JSONArray.fromObject(xmlDatas);
		} catch (DocumentException e) {
			e.printStackTrace();
			Map<String,String> map = new HashMap<>();
			map.put("message", "配置文件可能不存在！");
			object = JSONObject.fromObject(map);
		}
		System.out.println(object.toString());
		return object;

}

XmlData类：

public class XmlData {
	
	public String id;
	
	public String word;
	
	public String wordSize;
	
	public String wordType;
	
	public Integer wordRow;
	
	public String explian;
	
	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getWord() {
		return word;
	}

	public void setWord(String word) {
		this.word = word;
	}

	public String getWordSize() {
		return wordSize;
	}

	public void setWordSize(String wordSize) {
		this.wordSize = wordSize;
	}

	public String getWordType() {
		return wordType;
	}

	public void setWordType(String wordType) {
		this.wordType = wordType;
	}

	public Integer getWordRow() {
		return wordRow;
	}

	public void setWordRow(Integer wordRow) {
		this.wordRow = wordRow;
	}

	public String getExplian() {
		return explian;
	}

	public void setExplian(String explian) {
		this.explian = explian;
	}
	

获取动态列数据：

<span style="white-space:pre">	</span>/**
	 * 查看单个数据
	 * @return
	 * @throws DocumentException 
	 */
	@RequestMapping("getOneData")
	@ResponseBody
	public JSON getOneData(HttpSession httpSession, HttpServletRequest request, HttpServletResponse response) throws DocumentException{
		String path = (request.getSession().getServletContext().getRealPath("/")+ "WEB-INF/xmlFile/").replace("\\", "/");
		String uuid = request.getParameter("uuId");
		String xmlName = request.getParameter("xmlName");
		//读取xml模板
		List<XmlData> xmlDatas = readXmlService.getXmlFile(path + xmlName);
		//json转成object之后的数据
		List<ClueDataWithBLOBs> clueDataWithBLOBs = clueDataService.getClueByuuId(uuid, xmlDatas);
		JSON json = null;
		if(clueDataWithBLOBs.size() > 0){
			List<String> jsons = new ArrayList<>();
			for(ClueDataWithBLOBs object : clueDataWithBLOBs){
				jsons.add(object.getContentJson());//动态列数据在数据库中按照json存储
			}
			json = JSONArray.fromObject(jsons);
			
			
		}
		System.out.println(json.toString());
		return json;
	}

开发需求：

此系统通过动态配置字段，可以对不同字段的EXCEL表格进行导入，动态字段生成的XML配置文件，字段内容在数据库中均已json形式存储在一个字段内（contentJson）。所以通过不同模板上传的excel数据不同，contentjson字段个数、内容均不相同。但是现在系统需要将contentjson字段中不同的json值展现在相同的datagird中，所以才有了datagird动态生成字段的功能。

思路：

先根据XML配置文件生成列，也就是将表格的列画出来。然后将contentjson字段中的json值取出来跟之前的列匹配。

效果图：下图存在两条数据，代表两个上传的EXCEL文件

第一个数据点击，查看数据显示的列内容如下：

第二个数据，列显示的字段内容