easyui 实现动态表头

主要的思路就是:创建datagrid的时候将colums和数据当成参数，columns属性里面的field,和title通过后台传过来的数据进行循环拼接。

function  init(){

var array = [];
var arrayFields = [];
var columns = [];
$.ajax({
url : '${pageContext.request.contextPath}/*************.do/query',
type : 'POST',
data : form2Json('searchform'),
dataType : 'json',
success : function(data) {//data后台的传过来的表字段数组
console.info(data);
var areaIdArray =  data.areaId.split(',');
var areaName = data.areaName.split(',');
$(areaIdArray).each(function(index) {
arrayFields.push({
field : '',
title : '',
width : '100',
align:'center'
});
});
columns.push(arrayFields);
$(areaIdArray).each(function(index, el) {
columns[0][index]['field'] =  el;
});
$(areaName).each(function(index, el) {
columns[0][index]['title'] =  el;
});
console.info(columns);
initData(columns, data);
},
error : function(data) {
console.info(data);
}


});

}

function initData(column, data) {
$("#orderAreaCount").datagrid({
columns :  column,
fit : true,
singleSelect : true,
toolbar : '#tool',
fitColumns : false,
nowrap : true,
rownumbers : true

});
$("#orderAreaCount").datagrid('loadData', data);


}

/**
* 将表单数据转为json
*/
function form2Json(id) {
var arr = $("#" + id).serializeArray()
var jsonStr = "";


jsonStr += '{';
for (var i = 0; i < arr.length; i++) {
jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
}
jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
jsonStr += '}'


var json = JSON.parse(jsonStr)
return json
}