easyui之datagrid动态修改列
2015-08-28 15:12
399 查看
easyui datagrid 定义列的方式通常是:
但在实际项目中,我们会经常需要datagrid能动态生成列。
在网上搜了一篇文章:再次谈谈easyui datagrid 的数据加载
很佩服这个作者,他居然能在easyui那一堆满是数字和字母组合的变量的被混淆的源码中,找到自己想要扩展的功能。。。强!
但是我不喜欢这种方式。毕竟修改源码有很多副作用,还是喜欢原生态。
动态生成列,这个很常见的需求,easyui不太可能不支持。
只是官方文档没有提到而已,可能作者是想靠这些高级功能赚咨询费。。。
说了很多废话,现在贴出我费了不少周折搞定的方法:
是不是觉得很简单?优雅的原生支持。。。
需要注意的是,列定义的JSON格式,很重要,不能错!如果格式不对,就不能正常工作。
$('#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格式,很重要,不能错!如果格式不对,就不能正常工作。
相关文章推荐
- UGUI之判断是否点在UI上
- hdu 2227Find the nondecreasing subsequences(树状数组+dp+离散化)
- 【Material Design视觉设计语言】UI组件设计(八):列表
- iOS 三级UIPickerView使用
- [Usaco2005][BZOJ1674] Part Acquisition|dijkstra|priority_queue
- UINavigation_Bar
- iOS---UICollectionView详解和常用API翻译
- 【Material Design视觉设计语言】UI组件设计(七):网格
- 关于UIAutomator 滚动的steps
- iOS开发——高级篇——iOS键盘的相关设置(UITextfield)
- mysql数据库优化 pt-query-digest使用
- UILabel右边缘黑线问题
- mysql 必须掌握的工具pt-query-digest安装
- 图片拉伸 [UIImage resizableImageWithCapInsets:]使用注意
- NSIS DerectUI 皮肤插件 免费使用!!支持异性,动画!!
- UITableViewCell 的重叠
- cmake的四个命令:add_compile_options()add_definitions()target_compile_definitions()build_command()
- mysql抛出Value '0000-00-00' can not be represented as java.sql.Timestamp异常
- Qt Quick学习---------------构建一个简单的qml程序
- continue和break的区别