2010-08-28 64 views
1

我使用jQuery 1.4和jqGrid的3.8測試版,類似電子表格的行內編輯在jqGrid的

在這裏,我已經使用中,我想創建一個類似excel表格/電子表格, 接口jqGrid的表,其中的空白行數將已經顯示,並且用戶可以在表格單元格中輸入他們用於輸入電子表格的原因。

以及我通過運行JQgrid的addRowData函數循環創建了空的可編輯行。 之後,我通過指定可編輯區域使得幾個字段可編輯:true

現在問題出在我編輯字段中的某些內容並在其後寫入內容時如果我在另一行上移動,則上一行中的舊編輯數據將不會將商店放在桌上即可消失。

在這裏,是現場示例嘗試鍵入可編輯字段,然後移動到下一行。

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

+0

如果你想要移動到下一個單元格返回,而不是下一行......我試着改變上面的idOfNextRow與當前行相同,並將焦點設置爲下一個單元格,但這似乎沒有工作...... – 2011-10-12 10:38:40

回答

5

你的主要問題是,你應該改變editurl: "#"editurl: 'clientArray'(見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)如果您想使用客戶端編輯。

而且我建議你刪除

<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這樣的文件。我建議你也使用jQuery UI 1.8.4而不是1.8.2,直到jqGrid 3.8發佈,因爲一些小的已知問題。

修訂:順便問一下客戶端的編輯,你可以http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm下看到一個工作示例(使用雙擊並輸入行的編輯)。我之前準備了答案How to disable auto update when jqGrid edited?。這個例子的一個簡單的改變會給你你可能需要的代碼。

+0

非常感謝答覆,指定clientArray將解決我的問題的一半,但想象一下speread sheet/excel文件,其中如果您在單元格中鍵入內容然後它將存儲在表格(你不需要按enter鍵存儲表格中的值),而在jqgrid按下回車鍵將數據存儲到表格中。所以我想在用戶按下回車鍵時進入下一行,如果用戶在單元格中鍵入任何內容,請立即將它存儲在表格中。 – Hunt 2010-08-29 07:49:00

+0

對不起,但我不明白你想要實現什麼。你想在JavaScript中寫完整的Excel嗎? Excel具有更多功能。如果你想選擇下一行,你可以使用'jQuery(「#bms-record-grooms」).setSelection(idOfNextRow,true)'然後''jQuery('#'+ idOfNextRow +'_name')。focus()'(像'jQuery('#1_name')。focus()'其中「name」是應該接收焦點的列的名稱)。但是如果你想在JavaScript中做更多的Excel模擬,你的程序可能會非常大。 – Oleg 2010-08-29 10:09:06

+0

我的意思是說,我想覆蓋按Enter鍵的默認功能,如果用戶在單元格中輸入某些內容後,如果他按下輸入鍵,則他將移動到下一行,並且前一行中的數據將是保存在客戶端表 – Hunt 2010-08-30 13:50:29