Angularjs基于json数据的可排序项和类别

发布时间：2020-12-17 07:14:05 所属栏目：安全来源：网络整理

导读：我有这个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":"bb06b1eec9

我有这个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"
  }
  ]
}];

只是不确定您正在寻找什么类型的排序功能.

希望这可以帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!