jqGrid单元格自定义显示设置及getRowData获取原始数据示例

  jqGrid要格式化某个单元格的显示,可以使用colModel的formatter配置,如果仅仅用于显示,而不进行编辑或者调用getRowData获取数据,不会出现什么大问题,示例代码如下

jqGrid单元格自定义显示设置及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获取的到数据是格式化后,就是显示在单元格内的内容,而非原始的数据,如下图所示

jqGrid单元格自定义显示设置及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'; } }

jqGrid单元格自定义显示设置及getRowData获取原始数据示例

  unformat和formatter参数列表参考:jqGrid自定义格式化类型



原创文章,转载请注明出处:jqGrid单元格自定义显示设置及getRowData获取原始数据示例
评论(0)Web开发网
阅读(1976)喜欢(0)不喜欢(0)jqGrid中文API