首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >想要创建带有内联添加、编辑、保存而没有任何按钮的JQgrid

想要创建带有内联添加、编辑、保存而没有任何按钮的JQgrid
EN

Stack Overflow用户
提问于 2013-11-26 09:21:32
回答 1查看 6K关注 0票数 0

以下是我的要求:

  1. 最初,JQgrid应该是空的
  2. 在单击Jqgrid时,必须添加带有自动ID的新行
  3. 关于行的焦点丢失,应将数据保存到DB
  4. 在单击行时,用户应该能够编辑它,丢失的焦点数据应该保存到DB中。 瓦尔·拉塞尔;jQuery("#list").jqGrid({ url:"/TransactionType/GetGridData/“),数据类型:'json',mtype:'GET',高度:"300",colNames:‘客户ID',’联系人名称‘,’地址‘,’城市‘,’邮政代码‘,colModel:{ name:'CustomerID',索引:'CustomerID',宽度: 100,对齐:’左‘},{ name:'ContactName',索引:'ContactName',宽度: 150,对齐:‘左’,可编辑:真},{ name:‘地址’,索引:‘地址’,宽度: 300,对齐:‘左’,可编辑:真},{ name:'City',索引:'City',宽度: 150,对齐:‘左’,可编辑:真},{ name:'PostalCode',index: 100,对齐:‘左’,可编辑:真},寻呼机:jQuery(‘#寻呼机’),rowNum: 10,rowList: 1,3,5,10,20,30,40,50,记录:‘右’,取景器: true,sortorder:"desc",sortname:"CustomerID",排序类型:“整型”,多选:假,标题:“操作JSON数据”,空记录:“没有找到记录。”,加载文本:“加载.”,加载一次:真,pgtext:“{1}页{0}”,jsonReader:{重复:真,单元格:“单元格”},onSelectRow:函数(id) { if (id) { if (id !== lastsel) { jQuery('#list').jqGrid('restoreRow',lastsel);jQuery('#list').jqGrid('editRow',id,true);lastsel = id;} jQuery('#list').jqGrid('restoreRow',lastsel);lastsel = "";调试器;var rows = jQuery("#list").jqGrid('getRowData');var paras = new ();for (var i= 0;i< rows.length;i++) { var row = rowsi;paras.push($.param(行));} var rids =$(‘#list’).jqGrid(‘getDataID’);var n= rids.length;var nth_row_id = ridsn - 1;jQuery("#list").addRow(n + 1,参数={编辑:真,编辑:“ui-图标-铅笔”,添加:真,成瘾:“ui-图标-+”,保存:真,保存图标:“ui-图标-磁盘”,取消:真,取消图标:“ui-图标-取消”,addParams:{ useFormatter: false },editParams:{} };} },editurl:"/TransactionType/GetTotalCount",};

这是我的Jqgrid,在这里我可以添加行,但不能使用自动生成的id,并且在失去行焦点或输入键后无法调用控制器方法。

EN

回答 1

Stack Overflow用户

发布于 2013-11-26 10:33:14

jqGrid包括inlineNav方法,它允许添加到导航条(由navGrid创建,通常使用add: false, edit: false选项调用,请参见答案)添加、编辑、保存和取消按钮。如果用户单击按钮中的一个按钮,则将调用相应的内联编辑方法。可以使用editParamsaddParams.addRowParams来指定内联编辑方法的任何其他选项(例如,请参见这里 )。

当前代码直接使用addRow。第二个选项(parameters =)包含错误的语法。如果您需要生成唯一的id,我建议您使用$.jgrid.randId()而不是使用n + 1addRow的第一个,也是唯一的参数是带有选项的对象。如果直接使用adRow,则可以使用rowID选项指定新添加行的id。如果没有指定rowID选项,jqGrid将自动使用$.jgrid.randId()生成新行的唯一rowid。

所有内联编辑按钮的id都是根据网格的id和后缀设置的:"_iladd“、"_iledit”、"_ilsave“、"_ilcancel”。例如,网格有id="list",那么保存按钮的id将是"list_ilsave"。如果需要,您可以通过按其id寻址来禁用任何按钮(例如,$("#list_ilsave").removeClass('ui-state-disabled'); -启用保存按钮和$("#list_ilsave").addClass('ui-state-disabled'); -禁用它)。以同样的方式,您可以使用jQuery.click模拟单击任何按钮。例如,$("#list_ilsave").click();将模拟单击Save按钮。

如果用户单击Add按钮,新行(<tr>)将获得额外的类"jqgrid-new-row"。您可以使用这个事实来查找addRow添加的行。

您可以使用editoptions.dataEvents注册blurfocusout答案答案可以提供一些可以帮助您的代码片段。

使用成功保存后在DB中生成的值刷新网格的in可能很重要。实现这一点的方法有很多。最简单的方法之一是在成功保存行之后重新加载网格。请参阅答案的代码。另一种方法是从editurl指定的web方法(代码中的“/TransactionType/GetTotalCount”)返回新id。使用aftersavefunc回调,您可以获得editurl的响应,并修改网格中的id。以aftersavefunc中相对较长的答案代码为例。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20212867

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档