我正在尝试使用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/
答案 0 :(得分:8)
我在这里有一个可排序的绑定: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/
答案 1 :(得分:0)
您是否考虑过使用KoGrid?
答案 2 :(得分:0)
我之前遇到过这种情况,花了很长时间才弄明白。基本上发生的事情是你将排序绑定到一个空表。您需要创建一个自定义绑定处理程序来添加排序,或者您可以在使用knockout生成表后添加排序绑定。