jqGrid自定义某列数据的值

我们在使用grid的时候，经常遇到这样的需求：

1. 某列在后台服务器返回的值不是客户友好的，需要做转换

2. 某表查询出来的某列，只是一个id，还需要联查别的表，以显示用户友好的数据。但是如何再显示到前台的grid呢？

 

以下是解决方案：

1. 通过设置colModel Options  的editoptions ：

示例：

 

jQuery("#grid_id").jqGrid({ 
    ... 
    colModel: [ ... {name:'是否空闲', ..., editoptions:{value:"0:否;1:是"}, edittype:'select', formatter:'select', editable:true }, ... ] 
    ... 
});

 

  （editoptions的value还可以是一个map——json格式的字符串；edittype:'select', formatter:'select'的作用是，可以通过jqGrid自带的formedit功能，进行新增和编辑时，可以以下拉框的形式体现）

 

2. 通过JSON dot notation

When using JSON data with named values (i.e the repeatitems option is false) we can use so named dot notation and index notation.

For example, our colModel definition might be as follows:

 

  

 

jQuery("#gridid").jqGrid({
...
 colModel:[
   {name:'name',label:'Name', width:150,editable: true},
   {name:'id',width:50, sorttype:"int", editable: true,formatter:strongFmatter},
   {name:'email',label:'Email', width:150,editable: true,formatter:'email'},
   {name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},
   {name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'},
   {name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'},
   {name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions: value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},      
   {name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}      
 ],
...
});

 

Note the elements defined as name:'item.price' and name:'item.weight'

Then our data:

 

{
   "page":"1",
   "total":2,
   "records":"13", 
   "rows":[ 
      {"id":"12345","name":"Desktop Computers","email":"josh@josh.com","item":{"price":"1000.72", "weight": "1.22" }, "note": "note", "stock": "0","ship": "1"}, 
      {"id":"23456","name":"<var>laptop</var>","note":"Long text ","stock":"yes","item":{"price":"56.72", "weight":"1.22"},"ship": "2"},
      {"id":"34567","name":"LCD Monitor","note":"note3","stock":"true","item":{"price":"99999.72", "weight":"1.22"},"ship":"3"},
      {"id":"45678","name":"Speakers","note":"note","stock":"false","ship":"4"} 
    ] 
}

 

上面的官方示例中，需要显示item的price和weight，那就要在我们后台代码里这么写，迭代各row,联查item表，然后为item属性赋对象值