实现思路:
1. 首先将列头信息都查询出来,用js去构造出完成的cloumns属性;
/**
* 生成grid列信息
* @param data 数据
* @returns
*/
var appDataDic= {};
function generateColumns(data){
var col = [];
var columnNames = [];
var dataResult = [];
for (var i = 0; i < data.length; i++) {
var attr = {};
var app ={};
var appCode = data[i].applicationCode;
var appName = data[i].applicationName;
attr.field = appCode;
attr.title = appName;
attr.align = 'left';
attr.sortable = 'false';
attr.formatter = function(value, rowData, rowIndex) {
return formatRow(value, rowData)
};
dataResult.push(attr);
app.code = appCode;
app.name = appName;
appDataDic[appCode] = appName;
columnNames.push(app);
}
col.push(dataResult);
$obj_ = $("#demoId");
$obj_.datagrid({
fitColumns : true,
autoRowHeight : true,
nowrap : true,
border : false,
showFooter : false,
frozenColumns:[[
{field:'appCode'}
]],
columns : col
});
return columnNames;
}
/**
* 格式化显示的值
* @param value 值
* @param rowData 行记录信息
* @returns
*/
function formatRow(value, rowData) {
var opt = "";
var val = value.split(",");
if (!val[1]) {
return;
} else {
var codes = val[0].split("_");
opt += "<a href='#' onClick='showDetail(\"" + codes[0] + "\",\""
+ codes[1] + "\")'>" + val[1] + "</a>";
}
return opt;
}
2. 再请求行数据,使用datagrid的loadData将数据填充到grid中去
/**
* 填充grid数据
* @param columnNames 列名
* @returns
*/
function initData(columnNames) {
$.ajax({
url : '****/****/***',
type : 'POST',
timeout : 60000,
success : function(data) {
var dataResult = formatData(columnNames, data);
$obj_.datagrid('loadData', dataResult);
}
});
}
/**
* 构造数据
* @param col 列名
* @returns
*/
function formatData(col, map){
var data = [];
for (var i = 0; i < columns.length; i++) {
var attr = {};
attr.appCode = columns[i]["name"];
for (var j = 0; j < columns.length; j++) {
var key = columns[j]["code"] + "_" + columns[i]["code"];
var value = map[key];
if(value){
attr[columns[j]["code"]] = key + "," + value;
}else{
attr[columns[j]["code"]] = key + ", ";
}
}
data.push(attr);
}
var result = {};
result.total = data.length;
result.rows = data;
return result;
}