可排序的表使用knockout.js和jqueryUI

我想創建一個使用knockout.js和jqueryUI的可排序表，但不知道如果我使用了一個錯誤的方法。我使用下面的JSON結構，我的數據：可排序的表使用knockout.js和jqueryUI

{ 
       "columns":[ 
        "Header 1", 
        "Header 2", 
        "Header 3" 
       ], 
       "rows":[ 
        { 
        "Values":[ 
         "Col1Item0", 
         "Col2Item0", 
         "Col3Item0" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item1", 
         "Col2Item1", 
         "Col3Item1" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item2", 
         "Col2Item2", 
         "Col3Item2" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item3", 
         "Col2Item3", 
         "Col3Item3" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item4", 
         "Col2Item4", 
         "Col3Item4" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item5", 
         "Col2Item5", 
         "Col3Item5" 
        ] 
        } 
       ] 
      }

我沒有問題，結合該表並顯示它。我可以使用jqueryUI排序事件啓用排序功能，但是當收集結果時我卡住了。我發現了一些關於如何對列表進行排序的資源，但沒有對排序表進行排序。該排序的預期結果將是一個重新排列的JSON結構，我提供了正確的排序順序。

我試圖使用ko.toJSON（this）將結果保存在頁面上的隱藏字段，但目前得到一個異常。有什麼我失蹤？我創建了小提琴的一個項目，如果有人想看一看：http://jsfiddle.net/Nikita1984/bFSbR/

來源

2013-04-02 DaRussian

我在這裏有一個可排序的綁定：https：//github.com/rniemeyer/knockout-sortable。它讓你用'sortable：myData'替換'foreach：myData'，並且在UI中保持當前順序的最新狀態。 –

我在這裏有一個可排序的綁定：github.com/rniemeyer/knockout-sortable。它讓你用foreable替換foreach：myData：myData，並在UI中保持當前訂單的最新狀態。

您也可以通過選項，如：

<tbody data-bind="sortable: { data: rows, options: { handle: '.sortableHandle', cursor: 'move' } }">

或配置全局默認值，如：

ko.bindingHandlers.sortable.options.handle = ".sortableHandle";

這裏是你的樣品更新爲使用它：http://jsfiddle.net/rniemeyer/fC2DT/

來源

2013-04-02 13:27:49

這是太棒了！非常感謝你的幫助！ – DaRussian

你看着用KoGrid呢？

來源

2013-04-02 13:13:00

這是一條評論！而不是答案 –

好吧，我可以重新提示它建議他嘗試KoGrid，如果那樣會讓你更快樂，但這是我的真正回答 –

這應該是公認的答案，不要重新發明輪子 – Eva

我已經運行到這之前，花了我很長時間才弄清楚。基本上發生了什麼是你綁定到一個空表。您需要創建一個自定義綁定處理程序來添加排序，或者您可以在用淘汰賽生成表之後添加排序綁定。

來源

2013-04-02 13:30:08 user1813251

可排序的表使用knockout.js和jqueryUI

回答

相關問題