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'(请参见

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复制图像子目录.当前有一个小错误，因为

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.

已更新:通过客户端编辑的工作示例，您可以在如何禁用自动更新做了准备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屋！