jqGrid单元格自定义显示设置及getRowData获取原始数据示例
jqGrid要格式化某个单元格的显示,可以使用colModel的formatter配置,如果仅仅用于显示,而不进行编辑或者调用getRowData获取数据,不会出现什么大问题,示例代码如下
data.txt
{"list":[{"id":1,"name":"test1","sex":1},{"id":2,"name":"test2","sex":0}]}
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jqGrid单元格自定义显示设置及getRowData获取原始数据示例</title> <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.4.2.min.js" type="text/javascript"> </script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"> </script> </head> <body> <table id="grid"></table> <script type="text/javascript"> $(function () { $("#grid").jqGrid({ url: 'data.txt', cellEdit: true, cellsubmit: 'clientArray', datatype: "json", jsonReader: { repeatitems: false, root: "list" }, height: 150, caption: 'jqGrid单元格自定义显示设置及getRowData获取原始数据示例', colNames: ['ID', '姓名', '性别'], colModel: [ { name: 'id' }, { name: 'name', editable: true }, //添加formatter配置,格式化性别列显示,1为先生,0为女士 {name: 'sex', editable: true, formatter: function (v, opt, rec) { if (v == '0') return '女士'; return '先生'; }, unformat: function (v) { if (v == '女士') return '0'; return '1'; } } ] }); }); </script> </body> </html>
但是如果需要进行编辑或者getRowData获取数据时,会发现调用getRowData获取的到数据是格式化后,就是显示在单元格内的内容,而非原始的数据,如下图所示
要想获取原始的数据,一定记得配置unformat,jqGrid会自动调用unformat配置的函数将显示的内容还原为原始的值,然后再存储在对应的数据行中。
{name: 'sex', editable: true, formatter: function (v, opt, rec) { if (v == '0') return '女士'; return '先生'; }, unformat: function (v) { if (v == '女士') return '0'; return '1'; } }
unformat和formatter参数列表参考:jqGrid自定义格式化类型
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jqGrid单元格自定义显示设置及getRowData获取原始数据示例