使用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"
                     ]
                  }
               ]
            }

我没有问题将它绑定到表并显示它.我可以使用jqueryUI可排序事件启用sortable,但是当它收集结果的时候我被卡住了.我找到了一些关于如何对列表进行排序的资源,但没有对表进行排序.排序的预期结果将是我提供的正确排序顺序的重新排列的JSON结构.

我尝试使用ko.toJSON(this)将结果保存在页面上的隐藏字段中但当前获得异常.有什么我想念的吗？我创建了一个小提琴项目,万一有人想看一看:http://jsfiddle.net/Nikita1984/bFSbR/

Answer 1

我在这里有一个可排序的绑定:github.com/rniemeyer/knockout-sortable.它让你替换foreach:myData with 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/