用angularjs对表格的行进行排序或重新排列(拖放）

Sort or Rearrange Rows of a table in angularjs (drag and drop)

本文关键字：新排列 排列 拖放 排序 angularjs 表格      更新时间：2023-09-26

我想拥有重新排列表中行的功能（使用拖放对行进行排序）。行排列的索引也应该在模型中更改

我该如何做类似的事情：http://jsfiddle.net/tzYbU/1162/使用角度指令？

我正在将表格生成为：

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>

我做到了。请参阅下面的代码。

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

指令（JS）

var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);

还有另一个库：RubaXa/Sortable：https://github.com/RubaXa/Sortable

它适用于现代浏览器，不依赖jQuery。包括角度指令。我现在就去看看。

您还可以获得良好的触摸支持。

AngularJS并不是真正为DOM元素的操作而构建的，而是为了扩展页面的HTML。

请参阅这个问题和这个维基百科条目。

对于DOM操作，jQuery/mootools/etc将非常适合您（提示：jsFiddle链接中的示例）。

您可能可以使用AngularJS来跟踪元素的顺序，以更新模型。我不知道如何使用指令来实现这一点，但下面的代码可能是有用的

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...
}
var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'
    //Update scope.rules
}

然后，当您对列表进行重新排序时，只需使用更改后的规则及其在模型中的新位置来调用updateRules()。

其他想要这样的东西但不理解已接受答案的人。这是AngularJS的一个UI.Sortable指令，它允许您使用drag&滴

要求

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+

用法

在您的应用程序中加载脚本文件：sortable.js：（您可以在中找到这个sortable.js

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

请确保已将JQuery、AngularJs和JQueryUI js文件包含在在此可排序文件之前排序添加可排序模块作为应用程序模块的依赖项：

 var myAppModule = angular.module('MyApp', ['ui.sortable'])

将指令应用于表单元素：

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

开发说明：

  1. ng模型是必需的，这样指令就知道要更新哪个模型
  2. ui可排序元素应只包含一个ng重复
  3. 操纵模型的过滤器（如filter、orderBy、limitTo…）应该应用于控制器中，而不是ng repeat

第三点非常重要，因为它花了将近一个小时才理解为什么我的分类不起作用？？这是因为html中的orderBy这又重新设置了排序。

要了解更多信息，您可以在此处查看详细信息。

如果我理解正确，您希望能够对行进行排序吗？如果是，请使用UI排序：GitHub演示：codepen.io/thgreasi/pen/jlkhr

除了RubaXa/Sortable之外，还有一个angularjs库可导航，它是angular ui树。除了拖放，我们还可以在树结构中排列元素，还可以添加和删除元素（节点）

有关示例，请参阅此链接

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-例如。

请参阅github

https://github.com/angular-ui-tree/angular-ui-tree.

相关文章：