我有这个json结构:
{ "items":[ { "category":"Category 1","name":"01","id":"46701a72410c" },{ "category":"Category 2","name":"02","id":"9a18ffe9f148" },"name":"03","id":"de3a49a458cc" },{ "category":"Category 3","name":"04","id":"bb06b1eec9c8" },"name":"05","id":"92973f4cfbfc" },"name":"06","id":"b06bbb86d278" } ],"categories":[ { "isCollapsed":false,"name":"Category 1" },{ "isCollapsed":false,"name":"Category 2" },"name":"Category 3" } ] }
我正在尝试使用angularjs ui.sortable添加排序行为.我希望类别和项目都可以排序.
我基于这个json创建了两个嵌套的有序列表,但我不知道如何解决可排序的设置.这个json结构有可能吗?
通过这些设置,我只解决了类别排序工作.问题是物品移动时(错误的位置或未定义的).
$scope.sortableOptionsCategories = { stop: function(ev,ui) { console.log("Category moved."); } }; $scope.sortableOptionsItems = { connectWith: '.items-container',start: function(e,ui) { $(this).attr('data-previndex',ui.item.index()); console.log("Start: from position " + ui.item.index()); },update: function(e,ui) { var newIndex = ui.item.index(); var oldindex = $(this).attr('data-previndex'); $(this).removeAttr('data-previndex'); console.log("Update: " + oldindex + " -> " + newIndex); },stop: function(ev,ui) { console.log("Item moved."); } };
更新:
这是我的代码:
http://codepen.io/anon/pen/LpGmeY
保持json原样的解决方案对我来说是完美的,但如果不可能,我会接受任何其他解决方案.
解决方法
您是否尝试过使用此库 –
https://github.com/angular-ui-tree/angular-ui-tree
我创建了一个jsfiddle – http://jsfiddle.net/450fk7wp/5/ – 处理嵌套的,可排序的,可拖动的项目.
您将不得不转换您的JSON,使其看起来像这样:
$scope.rows = [{ "name":"Category 1","columns": [ { "category":"Category 1","id":"46701a72410c" } ],},{ "name":"Category 2","columns": [ { "category":"Category 2","id":"9a18ffe9f148" },{ "category":"Category 2","id":"de3a49a458cc" } ],{ "name":"Category 3","columns": [ { "category":"Category 3","id":"bb06b1eec9c8" },{ "category":"Category 3","id":"92973f4cfbfc" },"id":"b06bbb86d278" } ] }];
只是不确定您正在寻找什么类型的排序功能.
希望这可以帮助!