jqGrid行编辑配置，方法，事件

最新推荐文章于 2025-04-01 15:08:08 发布
最新推荐文章于 2025-04-01 15:08:08 发布
阅读量4.8k 收藏 3
点赞数
分类专栏： # jqgrid 文章标签： jqgrid
原文链接：https://www.cnblogs.com/yanglang/p/11656424.html
版权
本文详细介绍jqGrid插件中的行编辑功能，包括编辑、保存、还原行数据的方法及使用示例。通过具体配置和代码演示如何实现行级别的数据操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

软件要求和安装

方法

editRow：编辑行

saveRow：保存行

restoreRow：还原数据行

addRow：添加新数据行

inlineNav：给行编辑添加导航操作按钮

注意事项

数据如何组织

提交到服务器的内容

示例

 

 

用户用鼠标点击选择一行，jqGrid将可编辑的字段转换为数据输入单元，如上面图所示。不可编辑的列，如id，不会转为可输入单元，而是保持不变。可以通过配置colModel来实现。完成修改后，按下“enter”键提交数据到服务器。

 

软件要求和安装

　　要使用行编辑功能，需要在jqGrid下载页面勾选Inline Editing和Common modules，然后下载。下载地址：http://www.trirand.com/blog/?page_id=6

　　要看元代可以从src目录中找到 grid.inlinedit.js这个文件

　　属于行编辑的属性，事件和方法是jqGrid选项配置中的一个子集。

方法

有５个属于行编辑的附加方法

  • editRow

  • saveRow

  • restoreRow

  • addRow

  • inlineNav

　　需要在一个已经创建的jqGrid实例上调用这些方法，可以在事件中或者点击按钮触发这些事件。

var lastSel
jQuery("#grid_id").jqGrid({
//...
   onSelectRow: function(id){
     if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
     }
     jQuery('#grid_id').editRow(id, true); 
   },
//...
});

　　上面的示例中，在将被选中的行转为编辑模式前，判断是否已经存在编辑的行，存在则取消此行编辑模式还原为原始状态。如果你想保持数据而不是还原为原始状态，可以使用saveRow替代restoreRow方法。

editRow：编辑行

调用方式

jQuery("#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本jqGrid API调用方式

jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

editRow参数配置说明

  • grid_id ：已经构造过的jqGrid

  • rowid：此数据行的id

  • keys：设置为true可以使用 [Enter]保存数据或者[Esc] 取消编辑

  • oneditfunc：在行成功转为编辑模式下触发的事件，参数为此行数据id

  • successfunc, url, extraparam, aftersavefunc,errorfunc 和 afterrestorefunc在下面的saveRow方法中介绍。

　　拥有'not-editable-row' 样式的行不可编辑，即使colModel中配置了某些列能编辑。

　　设置editRow方法的oneditfunc为某个函数的句柄，例如func为一个函数，不能设置为字符串"func"或者func()这种格式，传递func即可。

　　jqGrid4+，可以传递对象作为配置值，如下示

jQuery("#grid_id").jqGrid('editRow',rowid, 
{ 
    keys : true, 
    oneditfunc: function() {
        alert ("edited"); 
    }
});
editRow默认配置如下

editparameters = {
    "keys" : false,
    "oneditfunc" : null,
    "successfunc" : null,
    "url" : null,
        "extraparam" : {},
    "aftersavefunc" : null,
    "errorfunc": null,
    "afterrestorefunc" : null,
    "restoreAfterError" : true,
    "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('editRow',rowid,  parameters);

　　如果key配置为true，那么 successfunc, url, extraparam, aftersavefunc, errorfunc 和 afterrestorefunc这些配置将作为参数传递给saveRow方法当按下 [Enter] 键时（saveRow） (saveRow不需要定义，jqGrid会自动调用它)。

　　当调用此方法编辑指定的某行时，jqGrid读取可编辑字段的内容，依据edittype和editoptions自动生成对应的输入控件。

saveRow：保存行

保存被编辑的行，调用方式

jQuery("#grid_id").saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本调用方式

jQuery("#grid_id").jqGrid('saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

jqGrid4+版本可以传递对象作为配置值，如下

jQuery("#grid_id").jqGrid('saveRow',rowid, 
{ 
    successfunc: function( response ) {
        return true; 
    }
});

saveRow默认参数配置如下

saveparameters = {
    "successfunc" : null,
    "url" : null,
        "extraparam" : {},
    "aftersavefunc" : null,
    "errorfunc": null,
    "afterrestorefunc" : null,
    "restoreAfterError" : true,
    "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('saveRow',rowid,  saveparameters);

saveRow参数配置说明

  • rowid：要保存的数据行id

  • successfunc：配置过，那么将在成功请求后触发（200状态，动态页没有发生错误）。事件参数为XHR对象，需要返回true/false（返回true会使用修改后的数据填充当前行，否则使用修改前的数据填充，同时关闭编辑模式。可以通过XHR.responseText得到服务器的返回值判断是否修改成功，在返回true/false，不会ajax可以参考这个：ajax对象）

  • url：定义此项，将会替代jqGrid配置中的editurl，如果设置为 'clientArray'，仅保存数据到grid中，不会向服务器提交数据（如果不想更改一行就提交一次，配置为这个值比较有用，可以点击页面上某个按钮将所有数据用ajax一次提交）

  • extraparam：提交到服务器的其他附加数据

  • aftersavefunc：数据保存到服务器返回客户端后触发。此事件参数为rowid和xhr对象，url设置为clientArray也会触发此事件

  • errorfunc：动态页出错时触发，。此事件参数为rowid和xhr对象

  • afterrestorefunc：调用restoreRow还原数据行原始信息（数据行保存不成功）时触发，参数有rowid

 

传递给saveRow配置值为函数的，需要传递函数句柄，如函数func，不能设置为"func"或者func()，配置为func即可

　　url（或者jqGrid配置中的editurl）未配置为 'clientArray'，调用此方法，数据行数据将将会以键值对形式提交到服务器，键名称来源于colModel配置的name，同时jqGrid会附加上id:rowid。如

jQuery("#grid_id").saveRow("rowid", false);

将保存数据到grid中并同时发送到服务器保存，而

jQuery("#grid_id").saveRow("rowid", false, 'clientArray');

仅保存数据到grid中，而不会发送ajax请求服务器。新版本API调用方式

jQuery("#grid_id").jqGrid('saveRow',"rowid", false);
jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');

以对象作为参数的调用形式

jQuery("#grid_id").jqGrid('saveRow',"rowid", { url : 'clientArray' });

有2个附加的配置可以在jqGrid中设置。

配置名称类型描述默认值
ajaxRowOptionsobject设置提交数据到服务器的ajax请求全局设置。可以重写当前所有保存数据ajax请求配置，包括complete事件empty object
serializeRowDatapostdata配置此事件可以序列化传递给保存数据行的ajax的数据。配置的函数需要返回序列化后的数据。当需要发送自定义数据时可以使用这个配置，例如，json、xml格式的字符串等，传递给配置函数的参数为发往服务器的数据。null

restoreRow：还原数据行

此方法将正在编辑的行还原为上一次成功保存的值。

调用方式

jQuery("#grid_id").restoreRow(rowid, afterrestorefunc);

新API调用方式

jQuery("#grid_id").jqGrid('restoreRow',rowid, afterrestorefunc);

jqGrid4+可以将参数作为对象传递，如下

jQuery("#grid_id").jqGrid('restoreRow',rowid, 
{ 
    "afterrestorefunc" : function( response ) {
        // code here 
    }
});

默认配置如下

restoreparameters = {
    "afterrestorefunc" : null
}
 
jQuery("#grid_id").jqGrid('restoreRow',rowid,  restoreparameters);

restoreRow参数说明

  • rowid ：要还原的数据行id

  • afterrestorefunc ：数据行被还原后触发，参数有 rowid

addRow：添加新数据行

行编辑模式下新增一行数据，调用方式

jQuery("#grid_id").addRow(rowid, parameters);

新API调用方式

jQuery("#grid_id").jqGrid('addRow',parameters);

parameters默认值如下

parameters =
{
    rowID : "new_row",
    initdata : {},
    position :"first",
    useDefValues : false,
    useFormatter : false,
    addRowParams : {extraparam:{}}
}

addRow方法配置说明

  • rowID - (string)新增加的新数据行id

  • initdata - (object) json键值对对象，键名称和colModel配置的name一致。设置单元格初始化值

  • position - (string)新增加行的位置，默认first。设置为last将会插入到grid最后

  • useDefValues - (boolean)设置为true启用colModel中editoptions配置

  • useFormatter : (boolean)设置为true启用jqGrid中 formatter格式化数据

  • addRowParams : (object) 传递给addRow方法的参数，和editRow配置一样（实际是传递给editRow方法用的）

　　调用这个方法，实际调用了２个已经存在的方法来实现，首先调用addRowData添加一行本地数据，然后调用editRow方法编辑此行。addRowParams设置了key为true，按下ESC键会删除此行数据

inlineNav：给行编辑添加导航操作按钮

添加导航操作按钮对应行编辑的addRow, editRow, saveRow, restoreRow方法。要使用此方法，需要首选调用navGrid方法。

调用方式

jQuery("#grid_id").navGrid(pagerid, {...});
jQuery("#grid_id").inlineNav(pagerid, parameters);

新API调用方式

jQuery("#grid_id").jqGrid('navGrid',pagerid, {...});
jQuery("#grid_id").jqGrid('inlineNav',pagerid, parameters);

parameters默认值如下

parameters = { 
   edit: true,
   editicon: "ui-icon-pencil",
   add: true,
   addicon:"ui-icon-plus",
   save: true,
   saveicon:"ui-icon-disk",
   cancel: true,
   cancelicon:"ui-icon-cancel",
   addParams : {useFormatter : false},
   editParams : {}
}
配置名称类型描述默认值
addboolean是否在导航栏中显示添加操作。点击这个按钮将会调用addRow(addParams)方法true
addiconstring设置添加按钮的图标。目前仅能设置为UI主题中的图标ui-icon-plus
addtextstring在添加按钮中显示的文本内容空值
addtitlestring鼠标移动到添加按钮上时显示的提示信息Add new row
editboolean是否在导航栏中显示编辑操作。点击这个按钮将会调用editRow(editParams)方法（注意需要选中一行，选中多行编辑最后一次选中的）true
editiconstring设置编辑按钮的图标。目前仅能设置为UI主题中的图标ui-icon-pencil
edittextstring在编辑按钮中显示的文本内容empty
edittitlestring鼠标移动到编辑按钮上时显示的提示信息Edit selected row
positionstring定义操作按钮在导航栏中的位置，可以为left，center，rightleft
saveboolean是否在导航栏中显示保存操作。点击这个按钮将会调用saveRow(editParams)方法true
saveiconstring设置保存按钮的图标。目前仅能设置为UI主题中的图标ui-icon-disk
savetextstring在保存按钮中显示的文本内容empty
savetitlestring鼠标移动到保存按钮上时显示的提示信息Save row
cancelboolean是否在导航栏中显示取消操作。点击这个按钮将会调用restoreRow(editParams)方法true
canceliconstring设置取消按钮的图标。目前仅能设置为UI主题中的图标ui-icon-cancel
canceltextstring在取消按钮中显示的文本内容empty
canceltitlestring鼠标移动到取消按钮上时显示的提示信息Cancel trow editiong
addParamsobject点击添加按钮后传递给addRow方法的参数，详细信息参考上面的addRow参数{useFormatter : false}
editParamsobject点击导航栏按钮的编辑，保存，取消按钮，传递给 editRow, saveRow, restoreRow 方法的参数。请参考相关方法获取更多信息{}

注意事项

 

数据如何组织

编辑某行及输入控件组成规则如下

  • 被编辑的行新增editable=“1”自定义属性

  • jqGrid配置savedRow（json对象array数组）被当前行的数据填充，键值对对象，附加 id:rowid 键值对

  • 隐藏的字段不包含在内（Hidden fields are not included）

  • 可编辑元素的id组成为 'rowid_'+ name，name为colModel定义的name值。例如，我们编辑id为10的行，此列colModel配置的name值为myname，那么这个输入控件的id为10_myname

  • 可编辑元素的name属性值为colModel中配置的此列的name配置值

  • 当行保存或者还原后，此行editable被设置为 “0” ，jqGridsavedRow中id为rowid的项被删除

提交到服务器的内容

提交到服务器的数据包含如下提到的内容

  • 键值对，键名称对应此行的输入控件name值（包含此行所有输入控件）

  • 附加id:rowid 键值对，rowid为此行数据id

  • 如果extraparam参数，将会和提交的数据一起发送到服务qui

示例

请自行将源代码保存为html文件运行

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.7.1.js"></script>
  <script src="jqgrid/js/jquery.jqGrid.src.js"></script>
  <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function () {
      var lastsel2
      jQuery("#rowed5").jqGrid({
        datatype: "local",
        height: 250,
        colNames: ['ID Number', 'Name', 'Stock', 'Ship via', 'Notes'],
        colModel: [
          { name: 'id', index: 'id', width: 90, sorttype: "int", editable: true },
          { name: 'name', index: 'name', width: 150, editable: true, editoptions: { size: "20", maxlength: "30" } },
          { name: 'stock', index: 'stock', width: 60, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" } },
          { name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", formatter: 'select', editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
          { name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
        ],
        onSelectRow: function (id) {
          if (id && id !== lastsel2) {
            jQuery('#rowed5').restoreRow(lastsel2);
            jQuery('#rowed5').editRow(id, true);
            lastsel2 = id;
          }
        },
        editurl: "server.php",
        caption: "Input Types"
      });
      var mydata2 = [
        { id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FE" },
        { id: "23456", name: "Laptop", note: "Long text ", stock: "Yes", ship: "IN" },
        { id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TN" },
        { id: "45678", name: "Speakers", note: "note", stock: "No", ship: "AR" },
        { id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FE" },
        { id: "67890", name: "Play Station", note: "note3", stock: "No", ship: "FE" },
        { id: "76543", name: "Mobile Telephone", note: "note", stock: "Yes", ship: "AR" },
        { id: "87654", name: "Server", note: "note2", stock: "Yes", ship: "TN" },
        { id: "98765", name: "Matrix Printer", note: "note3", stock: "No", ship: "FE" }
      ];
      for (var i = 0; i < mydata2.length; i++)
        jQuery("#rowed5").addRowData(mydata2[i].id, mydata2[i]);
    });
  </script>
</head>
<body>
  <table id="rowed5" class="scroll"></table>
</body>
</html>

reference:

https://www.cnblogs.com/yanglang/p/11656424.html

 

 

 

 

 

jqGrid 属性、事件全集
CTO成长之路——Rosanu
12-19 9557
以下是jqGrid 最常用的属性和事件，经过一段时间的整理，终于弄的差不多了。版权所有，转载请注明出处，向您的厚道致敬！谢谢！ var lastsel; jQuery().ready(function () { //父Grid（主Grid） jQuery("#list1").jqGrid({ url:'server.php?q=1', editurl:"s
JqGrid行编辑 功能重写
Richy的博客
05-17 944
toc 序 最近使用JqGrid，真是被折腾得死去活来。。 说实话jqgrid真的不好用，文档做得不好不说，功能也是做得相当难用。如果可以重来，我要选李白。。好了，不吐槽归吐槽。活还是要干。。 实现思维 之前写过一篇实现jqgrid 增删查改功能的，其中修改也是通过编辑行的方式的，使用的是本地缓存数据库。传送门 本文要实现的是 1：实时编辑提交数据。 2：改善JqGrid。既然那么难用，那就自已实现一套吧。 JqGrid 尿性 1：编辑状态下，按回车，自动提交。按Esc，自动取消保存。 在保存的过程中：保存
JQGrid的用法解析(列编辑,添加行,删除行)
09-04
本文是对JQGrid的用法--列编辑,添加行,删除行。进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
jqGrid中的编辑
yooodooo
08-20 429
在jqGrid的官方文档http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules中，对jqGrid的编辑总结了以下三种类型的编辑：  写道 cell editing: 编辑一个Grid的cellinline editing: 编辑同一row的几个cellform editing: 创建一个form表单在外部更新grid内容 ...
jqGrid的行编辑保存时如何使用ID确定修改数据
最新发布
guanqun007的博客
04-01 120
这里记录一下，免得下次忘记。
jqgrid行编辑+动态为其他列赋值
04-20
该方式是在jqgrid的列基础上进行编辑，为列添加保存事件，文本域和输入框采用blur失去焦点的方式进行保存，该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
jqGrid插件-行编辑
a985548426的博客
10-15 3245
一、效果图 原始样式 可编辑样式     二、 操作：  第一步，直接点击编辑按钮时，弹出提示，请选择要编辑的行  第二步，选择要编辑的行，选中后点击编辑按钮，出现可编辑  第三步，输入修改的值后，点击保存按钮 三、代码块：  1、表格设置 $("#jqGrid").jqGrid({ url: baseURL + 'loan/productAnal...
使用jqGrid修改数据并检查(转)
iteye_20696的博客
07-06 336
jqGrid可以有三种方式，让我们来修改显示在jqGrid中的数据。这三种方式分别是： Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGrid中直接修改某一行的数据 Form Editing——弹出一个新的编辑窗口进行编辑和新增 暂时先不管这三种方式，我们来看看如何让一个jqGrid的数据能够进行编辑呢？ 其实很...
前端开发：jqGrid控件的详细配置和高级使用方法
12-06
内容概要：本文档对jqGrid插件进行了详细介绍，内容涵盖了基本概念、配置选项、事件处理及常见问题解决技巧。其中包括了jqGrid的基础搭建流程，例如如何正确地引用相关样式文件及脚本文件，以及初始化jqGrid所需的...
jqGrid表格底部汇总、合计行footerrow处理
10-16
首先，要启用jqGrid的底部合计行功能，我们需要在表格配置中设置`footerrow`参数。默认情况下，`footerrow`是`false`，这意味着底部汇总行是关闭的。如果我们希望在表格下方显示一个包含汇总数据的行，我们需要将其...
jqgrid 编辑表格 一列
09-05
jqgrid 编辑表格 一列
jqgrid行编辑
09-15 2万+
ondblClickRow: function(id){ if(id && id !== lastsel){ var rowData = $("#jqGridId").jqGrid("getRowData", id); $('#jqGridId').jqGrid('restoreRow',lastsel); $('#jqGridId').jqGrid('editRow',id,{
33jqGrid 行编辑- 全列编辑
阿甘兄
04-24 914
当我们保存数据到服务器之后，我们可以对数据应用完全的控制权。众所周知，发送的数据是成功的。但是同样的我们将数据保存到数据库不一定会成功。为了控制这种情况，我们可以在数据保存到服务器的时候设置上一个回调函数。这个回调函数接收从服务器上返回的数据。根据这个数据，函数可以返回true或false。当返回true的时候意味着保存是成功的。当返回false的时候，保存是失败的。另外，保存数据中断，服务器不返...
jqGrid细节备注—jqGrid有很多事件
weixin_34232617的博客
02-17 287
jqGrid有很多事件，包括事件的参数，在下表中列出。 常用的事件包括afterInsertRow ，gridComplete，loadComplete，onCellSelect，onRightClickRow，onSelectRow等 代码示例如下： jQuery("#gridid").jqGrid({ ...   onSelectRow:function(row...
jqgrid 事件说明
热门推荐
炉火纯青
09-24 3万+
Events（事件） 事件响应动作被设置为表格的属性，以下定义了行被选中时的响应： var lastSel; jQuery("#gridid").jqGrid({ ...    onSelectRow: function(id){       if(id && id!
jqGrid的属性列表
weixin_33779515的博客
12-16 337
为什么80%的码农都做不了架构师？>>> ...
jqGrid行编辑事件
qq_15801963的博客
02-27 1579
见此链接内容 http://www.w3dev.cn/article/20130702/jqGrid-inline-edit-config.aspx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值