easyui datagrid 动态生成列

easyui datagrid 定义列的方式通常是:

$('#grid').datagrid({columns:[[
    {field:'f1',title:'字段1',width:160},
    {field:'f2',title:'字段2',width:160}
]]});	

但在实际项目中,我们会经常需要datagrid能动态生成列。

在网上搜了一篇文章:再次谈谈easyui datagrid 的数据加载

很佩服这个作者,他居然能在easyui那一堆满是数字和字母组合的变量的被混淆的源码中,找到自己想要扩展的功能。。。强!

但是我不喜欢这种方式。毕竟修改源码有很多副作用,还是喜欢原生态。

动态生成列,这个很常见的需求,easyui不太可能不支持。

只是官方文档没有提到而已,可能作者是想靠这些高级功能赚咨询费。。。


说了很多废话,现在贴出我费了不少周折搞定的方法:


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格式,很重要,不能错!如果格式不对,就不能正常工作。

评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值