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获取原始数据示例