0

我一直在尝试使用 Angular-ui-sortable 重新排序 Angular-datatables 中的行。重新排序没有发生。但是，如果我尝试使用普通表，它工作正常。如果可能，请帮助我（任何输入或方向）。

使用普通表它正在工作 - //jsfiddle.net/pmspraju/La4vqb8b/ 使用 angular-datatable 它不是 - http://jsfiddle.net/pmspraju/4o9fzwqz/

Plunker - http://plnkr.co/edit/XVnaNLuMWQTnYlrGwHdF?p=preview

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
</head>

<body ng-app="datatablesSampleApp">


  <div ng:controller="controller">
    <label>list: {{list1}}</label>
    <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" style="width:auto;" class="table table-bordered">
      <thead>
        <tr>
          <th>Index</th>
          <th>id</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody ui:sortable ng-model="list">
        <tr ng-repeat="lang in list1" class="item" style="cursor: move;">
          <td>{{$index}}</td>
          <td>{{lang.id}}</td>
          <td>{{lang.value}}</td>
        </tr>
      </tbody>
    </table>
    <hr>
  </div>

  <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
  <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

JavaScript：

(function(angular) {
  'use strict';
  angular.module('datatablesSampleApp', ['datatables','ui']).
  controller('controller', function($scope, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {


    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withPaginationType('full_numbers')
      .withDisplayLength(2)
      .withOption('order', [1, 'desc']);

    $scope.dtColumnDefs = [
      DTColumnDefBuilder.newColumnDef(0).notSortable(),
      DTColumnDefBuilder.newColumnDef(1).notSortable(),
      DTColumnDefBuilder.newColumnDef(2).notSortable()
    ];

    $scope.list1 = [{
      "id": "1",
      "value": "angular"
    }, {
      "id": "2",
      "value": "meteor"
    }];
  });
})(angular);

提前感谢您的投入。

4

2 回答 2

0

您需要在 HTML 中添加 JQuery UI 脚本。

尝试添加：

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

在这行代码下面：

<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
于 2015-10-20T02:58:20.410 回答
0

还没试过，打个电话吧。

$scope.dtOptions = DTOptionsBuilder.newOptions()
  .withPaginationType('full_numbers')
  .withDisplayLength(2)
  .withOption('order', [1, 'desc'])
  .withOption('rowReordering', true);   // Try to add this in your options
于 2015-10-14T02:20:49.733 回答