easyui datagrid 定义列的方式通常是:
但在实际项目中,我们会经常需要datagrid能动态生成列。
以下是datagrid一种动态列的实现方式:
$('#grid').datagrid({columns:[[
{field:'f1',title:'字段1',width:160},
{field:'f2',title:'字段2',width:160}
]]});
var options={};
$(function(){
var myNj = 9;
//初始化
$("#disgrid").datagrid({
type: 'POST',
nowrap: false,
striped: true,
fit:true,
width:1024,
height:500,
url:'',
pageSize:30,
remoteSort: false,
pagination:true,
rownumbers:true,
singleSelect:true,
queryParams:{
nj:myNj,
unitType:1
}
});
fetchData(myNj);
});
function fetchData(nj) {
var s = "";
s = "[[";
s = s + "{field:'unitname',title:'单元',width:160},{field:'practicetime',title:'测试时间',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";
//lu todo 列的定义可从服务器获得
if (nj==9) {
s = s + "{field:'aipanel_text_exam',title:'短文朗读',width:80},{field:'aipanel_scene_exam',title:'情景对话',width:80},{field:'aipanel_oral_exam',title:'简短说话',width:80}";
//lu 加一个计算列
s = s + ",{field:'tatal_score',title:'总分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";
}else if (nj==7||nj==8){
//....
}
s = s + "]]";
options={};
options.url = '/app/search.do';
options.queryParams = {
nj:nj,
unitType:1
};
options.columns = eval(s);
//lu 增加一列
options.columns[0].push(
{
field:'desc',title:'查看详情',width:60,
formatter:function(value,rec){
return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">详情</a>";
}
}
);
$('#disgrid').datagrid(options);
$('#disgrid').datagrid('reload');
}
需要注意的是,列定义的JSON格式,很重要,不能错!如果格式不对,就不能正常工作。