2

我正在尝试使用 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 可排序事件启用可排序，但是当需要收集结果时，我被卡住了。我找到了一些关于如何对列表进行排序的资源，但没有找到对表格进行排序的资源。排序的预期结果将是一个重新排列的 JSON 结构，我提供了正确的排序顺序。

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

4

3 回答 3

8

我在这里有一个可排序的绑定：github.com/rniemeyer/knockout-sortable。它可以让你用 sortable:myData 替换 foreach: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-02T13:27:49.693 回答
0

您是否考虑过使用KoGrid代替？

于 2013-04-02T13:13:00.793 回答
0

我以前遇到过这个，花了我很长时间才弄清楚。基本上发生的事情是将排序绑定到一个空表。您需要创建一个自定义绑定处理程序来添加排序，或者您可以在生成带有敲除的表后添加排序绑定。

于 2013-04-02T13:30:08.460 回答