一个将数据显示在grid中主要的原因是为了快速容易的编辑它，jqGrid支持3种编辑方法

1. jqGrid单元格编辑配置，事件及方法:：编辑表格中的单元格
2. jqGrid行编辑配置：同时编辑一行中的多个单元格
3. jqGrid表单编辑配置：在grid外部的表单中编辑数据行

在下载管理中每个模块有它自己的要求，但是不管哪个模块，都要勾选通用模块（common module）。下载地址：http://www.trirand.com/blog/?page_id=6 开发者可以从src目录中找到grid.common.js源文件。

　　所有编辑模块需要在colModel中配置通用编辑属性以便启用编辑，下面列出的属性是需要详细介绍的

• editable
• edittype
• editoptions
• editrules
• formoptions（仅在表单编辑模式有效）

通用配置语法如下

jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editable:true, edittype:'text', editoptions:{...}, editrules:{...}, formoptions:{...} }, ... ] ... }); 

　　对于特定的选项和事件请参阅对应的模块。对每个模块jqGrid为每个可编辑的元素配置不同的name和id，参考对应的编辑模块看如何构造。

布尔值，true或者false。定义此字段是否能编辑，默认为false不可编辑，要使字段可以编辑，设置为 editable:true。

需要注意的是隐藏字段（hidden fields）默认不能编辑；如果隐藏字段被标记为可编辑的，在行编辑和单元格编辑模块需要显示这些字段（使用showCol方法），才能进行编辑。在表单编辑模块中需要使用editrules选项（下面将介绍到）

定义可编辑字段的输入控件类型。可用值： 'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file' 和'custom'，默认值为'text'.

edittype设置为text，jqGrid将会构造一个type为text的input标签

<input type="text" ...../>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如

... editoptions: {size:10, maxlength: 15}

输入控件HTML结构如下

<input type="text" size="10" maxlength="15" />

jqGrid会自动给此配置添加id和name属性。

edittype设置为textarea，jqGrid将会构造一个textarea标签

<textarea></textarea>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如（注意添加rows）

... editoptions: {rows:"2",cols:"10"} 

对应的HTML结构

<textarea type="textarea" rows="2" cols="10"></textarea>

jqGrid会自动给此配置添加id和name属性。

edittype设置为checkbox，jqGrid将会构造一个type为checkbox的input标签

<input type="checkbox" .../>

使用 editoptions ，主要用于定义勾选或者未勾选时的值，例如

...editoptions: { value:"Yes:No" }

输入控件HTML结构如下

<input type="checkbox" value="Yes" offval="No".../>

当value为yes，checkbox被勾选，否则未勾选。值将会作为参数传递到jqGrid配置的editurl中。

editoptions中如果未设置value属性，jqGrid将会查找如下的值（false|0|no|off|undefined）以便构造checkbox。如果单元格内容都不包含这些值，那么属性值变为单元格的内容offval属性值设置为off。

示例，单元格内容为true

<input type="checkbox" value="true" offval="off" checked.../>

jqGrid会自动给此配置添加id和name属性。

edittype设置为select，jqGrid将会构造一个如下所示的select标签

<select> 
<option value='val1'> Value1 </option> 
<option value='val2'> Value2 </option> 
... 
<option value='valn'> ValueN </option> 
</select>

要配置select对象，有3个主要的类型

1. editoptions配置中的 value为字符 。editoptions 的value需要包含一组 “值:标签”用分号（;）分隔开，如下所示

editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }

上面的代码将会得到如下html代码

<select> 
<option value='FE'> FedEx </option> 
<option value='IN'> InTime </option> 
<option value='TN'> TNT </option> 
</select>

最后一组“值:标”不要以分号(;)结束

2. editoptions配置中的 value为对象

value配置需要包含json键值对对象，如下所示

... colModel : [ ... {name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} }, ... ] ...

对应的HTML结构

<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
</select>

3. 设置 editoptions配置 dataUrl 参数。 editoptions 中的dataUrl配置仅对editype:select有效。dataUrl表示从 配置的url中获取select元素的html代码。当配置了dataUrl，通过ajax获取html代码对元素进行填充，返回的html需要是一个有效的select元素html代码，如下所示

<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
...
</select>

上面三种方法配置的select元素，jqGrid会自动给元素添加id和name属性。

也可以设置select对象为多选的，需要设置size和multiple2个属性，如下所示

...editoptions: {multiple:true, size:3... }

edittype设置为password，jqGrid将会构造一个type为password的input标签

<input type="password" ...../>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如

... editoptions: {size:10, maxlength: 8}

输入控件HTML结构如下

<input type="password" size="10" maxlength="8" />

jqGrid会自动给此配置添加id和name属性。

edittype设置为text，jqGrid将会构造一个type为button的input标签

<input type="button" ...../>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如

... editoptions: {value:'MyButton'}

对应的HTML结构

<input type="button" value="MyButton" />

jqGrid会自动给此配置添加id和name属性。

edittype设置为image，jqGrid将会构造一个type为image的input标签

<input type="image" ...../>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如

... editoptions: {src:'path_to_my_image'}

输入控件HTML结构如下

<input type="image" src="path_to_my_image" />

jqGrid会自动给此配置添加id和name属性。

edittype设置为file，jqGrid将会构造一个type为filet的input标签

<input type="file" ...../>

使用 editoptions ，可以定义此字段对应输入控件需要的属性，例如

... editoptions: {alt:'Alt text'}

输入控件HTML结构如下

<input type="file" alt="Alt text"... />

jqGrid会自动给此配置添加id和name属性。如果创建了这个元素（一般使用表单编辑模式），表单不会为了上传文件增加ENCTYPE=“multipart/form-data"，需要倒入另外的插件来完成上传- Ajax File Upload 插件就是一个很不错的选择

这个编辑类型允许自定义可编辑的元素。edittype设置为custom后，再editoptions中需要配置2个函数，一个创建元素，另外一个负责在表单中设置和获取值，以便提交到服务器。这2个方法需要被定义为custom_element 和 custom_value. 看下面的editoptions获取更多信息。

当自定义元素创建后jqGrid会自动执行下面附加的任务

1. 添加 'customelement'样式
2. 添加name属性，对应colModel中定义的name值
3. 按照使用的编辑类型对应的id生成规则，给元素添加id

如上面示例所示的创建edittype为text，设置edittype为custom对应的代码

function myelem (value, options) {
  var el = document.createElement("input");
  el.type="text";
  el.value = value;
  return el;
}
 
function myvalue(elem, operation, value) {
    if(operation === 'get') {
       return $(elem).val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}
jQuery("#grid_id").jqGrid({
//...
   colModel: [ 
      //...
      {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
     //...
   ]
//...
});

editoptions配置为JSON键值对对象包含编辑列的相关信息。edittype设置为什么，对应的editoptions可以设置为什么，这个需要知道，下面列出的每个配置对edittype设置的元素不一定都有效。colModel中的editoptions使用配置语法如下，为JSON键值对

jQuery("#grid_id").jqGrid({
//...
   colModel: [ 
     //...
      {name:'price', ..., editoptions:{name1:value1...}, editable:true },
      //...
   ]
//...
});

下面为一些比较常用的选项

<select>
<option value='1'>One</option>
<option value='2'>Two</option>
...
</select>

…editoptions: { dataInit : function (elem) {
$(elem).autocomplete();
}
} 

… editoptions: { dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } },
{ type: 'keypress', fn: function(e) { console.log('keypress'); } }
]
} 

这个选择添加附加的属性到可编辑元素，在colModel中 配置。通常用于在提交内容到服务器前验证用户输入的信息。demo

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
      ...
   ]
...
});

下面为可用的选项

仅在表单编辑有效。目的是记录表中的元素并且附加一些信息在编辑元素的前面或者后面。语法如下

jQuery("#grid_id").jqGrid({
//...
   colModel: [ 
      //...
      {name:'price', ..., formoptions:{elmprefix:'(*)', rowpos:1, colpos:2....}, editable:true },
     //...
   ]
//...
});

如果colModel中要使用rowpos和colpos配置，那么建议所有可编辑的字段使用这些配置

下面为可用的选项

2个元素可以有相同的行位置，但是不同的列位置，这样这2个元素在表单中共处一行。