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文件



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



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