基於jQuery的表格分頁和內聯編輯支持

對於已經完成類似工作的人來說，這可能很簡單。基於jQuery的表格分頁和內聯編輯支持

我有一個簡單的網格中，我呈現數據到控件（例如文本框，複選框，...），所以用戶可以做批量編輯中呈現的行，然後點擊提交按鈕來獲取所有數據庫中的更新。

現在，我在我的ASP.Net MVC2 proj中有這樣的可編輯網格的工作版本。接下來，我想要在客戶端使用jQuery （可以假設我正在使用大量記錄呈現整個網格），然後使用排序，分頁&篩選器。我可以用服務器端編碼輕鬆做到這一點，並且只需渲染一頁Grid，但現在考慮我想在客戶端一側執行此操作。

我試過了一些jQuery插件 - 它們工作正常，但對於正常的只讀文本基於網格。我的網格有文本框，用戶可以編輯的複選框，我的問題是，這些插件在搜索期間都沒有保留其編輯值&分頁。或者他們動態地堅持它 - 這不會傳遞給服務器！

例如，在這個電網的複選框狀態或者不跨越分頁堅持：

enter image description here

希望有人已經通過這個，並會幫助我。 我們努力讓事情變得簡單&乾淨。

插件嘗試：

來源

2012-03-29 Hemant Tank

嘗試jqGrid，我認爲它具有所需的所有功能http://trirand.com/blog/ jqgrid/jqgrid.html – 2012-03-29 14:39:29

剛剛測試過另一個插件：http://www.scriptiny.com/2009/03/table-sorter/，但它不會在分頁時保持複選框狀態。 – 2012-03-29 14:42:45

基於一些流行的插件我到目前爲止審查和基本的瞭解（或多或少）如何他們會取得客戶端上的分頁，我得到大多數人 -

緩存變量中的表格行。並且他們在分頁或搜索之前清除「TBODY」，並用結果重新填充。

因此，在回發期間，我只獲取「填充」行數而不是實際表格。至少這就是我的MVC動作給我看的東西。有時候，它是空的！

我的結論是，雖然狀態，並在網格控件的值似乎是跨paginaton可見，他們是不同步與回發期間所被傳遞。我很樂意錯誤或者如果一個插件做得更好。

SOLUTION：現在，我已經記錄的值，如果在臨時文本框我選中的複選框，這將使可用值回發過程中沒有無論插件不具有實際的表的！

謝謝。

來源

2012-03-30 12:12:21

順便說一句，我已經確認了「jquery.tablesorter.filter.js」的緩存方案 - 它會在回發期間搞亂你的tbody。最好你可能會期望它會返回原來的tbody。這些插件最適合只讀/僅文本網格。 – 2012-03-30 12:29:29

看一看這篇文章： http://roberto.open-lab.com/2010/01/30/javascript-grid-editor-i-want-to-be-excel/

幾個這些網格的給你哪些東西幾乎完全控制堅持和時。如果您希望您的複選框立即保留，您可以在複選框本身上添加一個監聽器，以便調用服務器。

我是DataTables的忠實粉絲，但我沒有用它來描述你描述的特定場景。

來源

2012-03-29 14:40:49 Marc

如果你已經使用jqGrid - 它是否有一個簡單的初始化程序，如：$（「＃sortable」）。tablesorter（）。我看到它的構造函數問得太多了！ – 2012-03-29 15:07:16

我爲tablesorter編寫了一個複選框解析器，它允許您對複選框列進行排序。

我還沒有測試過這個，但由於它使用updateCell方法更新緩存的單元格內容，無論何時修改複選框，我認爲它可能只是與分頁器插件一起工作。

檢出the demo here，只需複製解析器代碼並與尋呼機插件一起嘗試。

編輯：哎呀，我忘了它會需要在github上從這個叉的最新版本tablesorter。原因是原始的tablesorter沒有將所有額外的變量傳遞給format函數：format: function(s, table, cell, cellIndex) {}

來源

2012-03-31 02:02:01 Mottie

我想我沒有閱讀關於使用尋呼機的表的部分。如果你使用我的fork的分支，[pager]（http://mottie.github.com/tablesorter/docs/example-pager.html）有一個名爲'removeRows'的附加選項，你可以將它設置爲'false'保持整個tbody。 – Mottie 2012-09-02 12:31:26

基於jQuery的表格分頁和內聯編輯支持

回答

相關問題