Flexigrid自定义显示数据列
近期在搞ExtJs,发现ExJs的Grid相当的强大,后来又搞Jquery时,就对原来的表格不怎么满意了,于是,花了点时间,从网上找了个Grid插件,这个插件功能是比较强大,什么行排序、筛选、分页都有,应该是能满足项目的需要。
但在深入研究时,却发现了两个问题。
1,Flexigrid不支持自定义数据列。
2,默认没有CheckBox列。
关于第一个问题,事情是这样的。
像ExtJs是先定义Store,Store中可以把所有Fields列出来,需要用到哪个,在下面的ColumnModel中声明就可以,这里可以自由组合排列,非常方便。
但Flexigrid就不行,经分析原因,是因为FlexGrid中返回的Json格式,根本就没有列名称这个字段,它只是按照顺序在界面上显示。
返回的字符串如下所示:
{"page":2,"rows":[{"cell":["66","dd"],"flexrowid":""},{"cell":["77","ee"],"flexrowid":""},{"cell":["88","sd"],"flexrowid":""},{"cell":["99","xc"],"flexrowid":""},{"cell":["10","xas"],"flexrowid":""}],"total":21}
在界面上定义显示字段时,这样定义:
colModel: [
{ display: 'Select', name: 'id', width: 40, sortable: true, align: 'center', checkbox: true },
{ display: 'ID', name: 'Flexgrid_KeyID', width: 40, sortable: true, align: 'center' },
{ display: 'Name', name: 'name', width: 40, sortable: true, align: 'left' },
{ display: 'ISOAA', name: 'isoAA', width: 40, sortable: true, align: 'center' },
{ display: 'ISOAA', name: 'isoAA', width: 40, sortable: true, align: 'center' },
{ display: 'ISOAA', name: 'isoAA', width: 40, sortable: true, align: 'center' },
{ display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
{ display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: false },
{ display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
]
看到没,Name可以随便写。
效果如下:

这里就会出现一个问题,我后台的列表字段是相对固守的,假如我只需要显示中间的某些列,怎么办?
不过这个难不倒我,我想到了使用Tuple,代码这样写:
//自定义列
var tupR = (from l in list
select Tuple.Create(l.CID, l.name, l.numcode,DateTime.Now)).ToList(); string json_str_tupR = WXFlexigridHelp.FlexigridTable<Tuple<int, string, string, DateTime>>(tupR, pageindex, total, rowIdName).ToJson();
再看效果,已变成下图所示:

是不是很爽呀。
至于第二个问题,我参考网址:http://tomorrow009.iteye.com/blog/891641
很容易实现需要的效果。
Flexigrid自定义显示数据列的更多相关文章
- mysql数据库导出模型到powerdesigner,PDM图形窗口中显示数据列的中文注释
1,mysql数据库导出模型到powerdesigner 2,CRL+Shift+X 3,复制以下内容,执行 '******************************************** ...
- 转 在PowerDesigner的PDM图形窗口中显示数据列的中文注释
Name是名称(字段描述),Code是字段名称,Comment是注释名称,ER图中显示的是Name.一般设计时,Name跟comment都设计成描述, 而设计时候常把comment写成中文,name保 ...
- Silverlight中DataGrid的显示指定列、修改默认列名和格式化日期数据和小数数据
一:DataGrid的显示指定列.修改默认列名 使用自动生成列,就会无区别的按缺省格式展示所有项目.除了bit类型,其他类型项目会以字符串形式展现. 通过设置Columns属性,可以选择性的显示列,以 ...
- Django 列的自定义显示
ModelAdmin 作用:对后台数据表的显示做自定义的设置(如果对django默认的显示模式感到满意则不需要定义modeladmin).我对默认的显示模式永远不满意! 定义modeladmin: f ...
- DataGridView右键菜单自定义显示及隐藏列
WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为: ...
- SharePoint 2013 关于自定义显示列表表单的bug
1.在SharePoint 2013中,我们隐藏列表Dispform页面的ListFormWebPart部件,转而使用自定义显示列表表单进行展示,因为这样更容易定制我们需要的显示: 2.之后发现文件夹 ...
- pentaho cde 选择性的显示多列数据
在业务需求中,有时候会有这种需要,就是查出来可多列数据,而我只想画出来其中的一列或者说某一列,而pentaho会默认画出查出来的所有数据,而不断的更改数据源又太麻烦,这时就要用到resders方法了. ...
- Flexigrid在IE下不显示数据的处理
文章总结自我的论坛提问: http://bbs.csdn.net/topics/390498434?page=1#post-394918028 解决方法: 网上的答案经我验证都是不靠谱的,以后大家就知 ...
- Excel导入sq server后数据列以科学计数法显示
一.选中excel数据列如图 二.选择数据--分列 三.选择下一步,下一步,文本 四.完成 五.这样把excel导入到数据库中是以文本形式显示不会出现科学计数法
随机推荐
- angular入门系列教程3
主题: 本篇主要目的就是继续完善home页,增加tab导航的三个页index index1 index2 效果图: 细节: 初始化的JS就是咱们的home.js,仔细来看. angular的route ...
- oracle将两个结果连接后进行查询,得到两个查询的联合结果
一.需求 用户答题,共3道,必须3题都答完才能提交. 目的:要查询用户答对了几题,答错了几题.(当然此处可以只查答对的题目数,用3减即得答错题的题目数) 二.sql select * ) rightC ...
- 01-08-01【Nhibernate (版本3.3.1.4000) 出入江湖】NHibernate中的一级缓存
缓存的范围? 1.事务范围 事务范围的缓存只能被当前事务访问,每个事务都有各自的缓存,缓存内的数据通常采用相互关联的对象形式.缓存的生命周期依赖于事务的生命周期,只有当事务结束时,缓存的生命周期才会结 ...
- Unity3D角色攻击范围判定和攻击判定
原地址:http://www.unity蛮牛.com/blog-1801-479.html 第一种方法:运用点乘 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...
- linux源代码阅读笔记 linux文件系统(三)
当系统申请一个新的inode时.系统并不会对磁盘进行读写.它会在存储在内存的inode表(inode_table)中寻找一个空闲的位置. 如果找到了,直接返回该inode.否则要等待一个空闲的位置. ...
- Window 8.1 开启Wifi共享
p{padding-left:20px;} Hosted network supported:Yes 支持Wifi共享 命令:netsh wlan set hostednetwork mode=al ...
- 初学tornado之MVC版helloworld
作者:the5fire | 标签: MVC tornado | 发布:2012-08-06 2:41 p.m. 文接上篇,看我一个简单的helloworld,虽然觉得这个框架着实精小,但是实际开发 ...
- CentOS下安装Redmine 2.5.2
Redmine是用Ruby开发的基于web的项目管理软件,所以先要下载安装Ruby,再下载对 Ruby组件进行打包的 Ruby 打包系统RubyGems. 第一步:下载必要的软件 1.依赖包安装 # ...
- (转)开源爬虫larbin分析
转自风中之炎的博客:http://www.cnblogs.com/FengYan/archive/2012/02/04/2338630.html 1. larbin简介(百度百科) larbin是一种 ...
- lintcode: 三数之和II
题目 三数之和 II 给一个包含n个整数的数组S, 找到和与给定整数target最接近的三元组,返回这三个数的和. 样例 例如S = . 和最接近1的三元组是 -1 + 2 + 1 = 2. 注意 ...