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

Question

我正在尝试使用 knockout.js 和 jqueryUI 创建一个可排序表，但不确定我是否使用了错误的方法。我的数据使用以下 JSON 结构:

{
               "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"
                     ]
                  }
               ]
            }

我可以将其绑定(bind)到表格并显示它。我可以使用 jqueryUI 可排序事件启用可排序，但是当需要收集结果时我陷入困境。我找到了一些有关如何对列表进行排序的资源，但没有找到有关对表格进行排序的资源。排序的预期结果将是我提供的具有正确排序顺序的重新排列的 JSON 结构。

我尝试使用 ko.toJSON(this) 将结果保存在页面上的隐藏字段中，但目前遇到异常。我有什么遗漏的吗？我用 fiddle 创建了一个项目，以防有人想看一下:http://jsfiddle.net/Nikita1984/bFSbR/

Answer 1

我这里有一个可排序的绑定(bind):github.com/rniemeyer/knockout-sortable 。它允许您将 foreach: myData 替换为 sortable: myData 并让您的 UI 保持最新的当前顺序。

您还可以传递选项，例如:

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

或者配置全局默认值，例如:

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

以下是已更新以使用它的示例:http://jsfiddle.net/rniemeyer/fC2DT/