jqgrid动态设置某个单元格进入编辑状态

最新推荐文章于 2023-08-31 10:47:24 发布

zhengxiangwen

最新推荐文章于 2023-08-31 10:47:24 发布

阅读量2.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jqgrid

本文链接：https://blog.youkuaiyun.com/zhengxiangwen/article/details/53932944

jqgrid 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 jqGrid 实现表格数据的编辑与保存功能。点击“修改”按钮后，通过设置列 qtype 的 editable 属性为 true 使表格行进入编辑状态。编辑完成后点击保存按钮，重新设置 editable 属性为 false，并将数据保存至数据库，最后重新加载表格。

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

一、关键点

1、点击修改按钮时，设置列qtype的editable属性值为true，表示此字段可编辑；然后设置id对应的行进入编辑状态，此时该行中所有的可编辑列都将进入编辑状态。

$("#jqgridTable2").setColProp("qtype",{editable:true});
$("#jqgridTable2").editRow(id,true);

其中qtype是列名，id是行id值。

2、编辑完数据点击保存按钮进行保存时，重新设置该列（qtype）的editable属性值为true，表示此字段不可编辑。保存数据到数据库然后重新加载一次表格。

$("#jqgridTable2").setColProp("qtype",{editable:false});

//这里省略编辑完后进行的数据保存操作

//重新加载表格
$("#jqgridTable2").jqGrid().trigger("reloadGrid");

按钮所在地：

gridComplete: function(){
				   					var ids = $("#jqgridTable2").jqGrid('getDataIDs'); 
				   					for(var i=0;i < ids.length;i++){
				   						var id = ids[i]; 
				   						var button = "<input type='button' value='修改' onclick=\"updateRow('"+id+"',this);\" />"; 
				   						$("#jqgridTable2").jqGrid('setRowData',id,{operation:button});
				   					} 
				   				}