jqGrid单元格/行编辑模式下getRowData如何获取数据行

jqGrid API已经明说过,编辑模式下不要调用getRowData,要不得到数据行列信息包含的是单元格的innerHTML,而不是实际输入控件的值。参考jqGrid的源代码,getRowData的实现方法是遍历tr获取td的innerhTML。

  getRowData在单元格和行编辑模式下受到影响,在表单编辑模式没问题,因为表单没有直接修改jqGrid生成输入对象,而是在新的控件中生成编辑对象。

  要想在单元格和行编辑模式下getRowData返回实际的数据行,而不是包含html代码的内容,可以参考下面的。

  对于单元格编辑,需要先还原或者保存此单元格,然后再调用getRowData方法,实现如下
1、给grid添加beforeEditCell事件,声明2个window域的变量记录单元格的行号和列号

-收缩 JavaScript代码
beforeEditCell: function(rowid,cellname,v,iRow,iCol){
  lastrow = iRow;
  lastcell = iCol;
}

2、在调用getRowData获取数据前,先保存/还原单元格

-收缩 JavaScript代码
$( "#grid").jqGrid( "saveCell",lastrow,lastcell); //保存单元格,切换为文本模式
//或者===>
//$("#grid").jqGrid("restoreCell",lastrow,lastcell);//还原单元格,切换为文本模式
var recs=$( "#grid").jqGrid( "getRowData");

 


  对于行编辑模式,原理一样,还原正在编辑的行或者保存数据到内存中


1,调用editRow时传递oneditfunc事件处理函数保存正在编辑的行的id

-收缩 JavaScript代码
$( '#list4').jqGrid( 'editRow', rowid,  true,
function (rowid) {
     window.rowid=rowid;
});


2,在调用getRowData获取数据前,先保存/还原正在编辑的数据行

-收缩 JavaScript代码
jQuery( "#grid_id").saveRow(rowid,  false'clientArray');
//==>或者还原
//jQuery("#grid_id").restoreRow(rowid);
var recs=$( "#grid").jqGrid( "getRowData");
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,针对您的问题,我可以给您提供一些思路和代码示例,希望能帮到您。 首先,要实现 jqgrid编辑单元格下拉框选择功能,您需要引入以下两个插件: 1. jqGrid:这是一个 jQuery 插件,用于实现表格的展示和编辑功能。 2. select2:这是一个 jQuery 插件,用于实现下拉框的选择和搜索功能。 接下来,您需要在 jqGrid 中定义一个列模型,其中包含需要编辑的列和下拉框列。例如: ``` colModel: [ { name: 'id', index: 'id', editable: false, width: 50 }, { name: 'name', index: 'name', editable: true, edittype: 'text', width: 100 }, { name: 'gender', index: 'gender', editable: true, edittype: 'select', editoptions: { value: 'M:Male;F:Female', dataInit: function(elem) { $(elem).select2({ width: '100%' }); } }, width: 100 } ] ``` 在上面的代码中,第一列是 ID 列,不可编辑;第二列是姓名列,可以编辑编辑类型为文本框;第三列是性别列,可以编辑编辑类型为下拉框,下拉框的选项值为 M:Male 和 F:Female,同时使用 select2 插件进渲染。 最后,在 jqGrid 中启用编辑功能和单元格编辑功能,例如: ``` editurl: 'server.php', cellEdit: true, cellsubmit: 'clientArray', rownumbers: true, rownumWidth: 40, pager: '#pager', viewrecords: true, caption: 'My first grid', height: 'auto', width: 'auto', ``` 在上面的代码中,editurl 属性指定了提交数据的 URL,cellEdit 属性启用了单元格编辑功能,cellsubmit 属性指定了提交数据的方式,rownumbers 属性启用了号列,pager 属性指定了分页控件的 ID,viewrecords 属性启用了记录总数和分页信息的显示,caption 属性指定了表格的标题,height 和 width 属性指定了表格的高度和宽度。 以上就是实现 jqGrid 编辑单元格下拉框选择的思路和代码示例,希望能对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值