jqGrid 中类似电子表格的内联编辑 [英] Spreadsheet-like inline editing in jqGrid

问题描述

我正在使用 jQuery 1.4 和 jqGrid 3.8 beta，

I am using jQuery 1.4 and jqGrid 3.8 beta,

这里我使用了 jqgrid 表，我想在其中创建像 excel 表/电子表格这样的界面，其中已经显示了空白行数，用户可以在表格单元格中输入记录，说明他们过去在电子表格中输入的原因.

Here I have used jqgrid table in which I wanted to create interface like excel sheet / spread sheet, where number of blank rows will already be displayed and the user can enter record into table cells the why they used to enter in spread sheet.

我通过运行 JQgrid 的 addRowData 函数循环创建了空的可编辑行.之后，我通过指定 editable:true 使几个字段可编辑

well I have created empty editable rows by running loop of addRowData function of JQgrid. after that I made few fields editable by specifying editable:true

现在的问题是，当我在字段中编辑某些内容并在此之后编写某些内容时，如果我移至另一行，那么前一行上的旧编辑数据将不会存储在表中，它会消失.

now the problem is when I edit something in a field and write something after that if I move on another row then old edited data on a previous row won't get store on table it gets vanish.

这里是实时示例，尝试输入可编辑字段，然后移至下一行.

here, is the live example try to type in a editable field and then move to next row.

http://www.logicatrix.com/example/records.html

推荐答案

你的主要问题是你应该把 editurl: "#" 改成 editurl: 'clientArray'(见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)如果你想使用客户端编辑.

Your main problem is that you should change editurl: "#" to editurl: 'clientArray' (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow) if you want to use client side editing.

另外我建议你删除

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

因为您在 jqGrid 的所有需要​​的部分之前插入(js/grid.base.js"等).您还应该从 jQuery UI 复制图像子目录.目前有一个收到小错误，因为像 http://www.logicatrix.com/example/images/ui-bg_highlight-soft_100_eeeeee_1x100.png 无法加载.由于一些已知的小问题，我建议您在 jqGrid 3.8 发布之前也使用 jQuery UI 1.8.4 而不是 1.8.2.

because you insert before all needed parts of jqGrid ("js/grid.base.js" and so on). You should also copy images subdirectory from the jQuery UI.Currently one recieve small errors because files like http://www.logicatrix.com/example/images/ui-bg_highlight-soft_100_eeeeee_1x100.png could not be loaded. I recommend you also use jQuery UI 1.8.4 instead of 1.8.2 till the release of jqGrid 3.8 because of some small known problems.

更新:顺便说一下客户端编辑的工作示例，您可以在 http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm(使用双击和 ENTER 进行行编辑).我之前准备好了答案如何禁用自动更新jqGrid 什么时候编辑的?.对示例进行简单的更改将为您提供您可能需要的代码.

UPDATED: By the way a working example of client side editing you can see under http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (use double-click and ENTER for row editing). I prepared it before for the answer How to disable auto update when jqGrid edited?. A simple change of the example will give you the code which you probably need.

这篇关于jqGrid 中类似电子表格的内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！