使用角度数据表进行UI排序

我一直在尝试使用Angular-ui-sortable来对Angular-datatables中的行进行重新排序。重新排序不会发生。但是，如果我尝试使用普通表，它工作正常。如果可能的话，请帮助我（任何输入或方向）。使用角度数据表进行UI排序

与普通表是工作 - //jsfiddle.net/pmspraju/La4vqb8b/ 带角的数据表是不 - 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="[email protected]" 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="[email protected]" 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);

预先感谢您的意见。

来源

2015-10-02 user3582387

还没有尝试过，但给它打电话。

$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-14 02:20:49 JasonP

感谢您的答复。它解决了。插件版本不匹配。 – user3582387

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

尝试增加：

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

下面这行代码：

<script data-require="[email protected]" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

来源

2015-10-20 02:58:20 sanwrit

使用角度数据表进行UI排序

回答

相关问题