使用jquery和AngularJS对列进行重新排序

Question

我正在使用jQuery的dragtable.js进行拖放操作。我也在使用AngularJs对表格进行排序，但是这并不是很好。

我希望能够通过点击th标签来排序列，并且能够重新排列列。现在的问题是，我只能移动列但不能对它们进行排序。

<div ng-app="myApp"> 
<div ng-controller="myCtrl"> 

<table class="table table-striped table-bordered table-hover" id="dragCustomers"> 
    <thead> 

    <tr> 
     <th>#</th> 
     <th ng-repeat="(key,label) in labels" ng-class="{ 'notdraggable' : key == 'fullname'}"> 
     <a href="" ng-click="reverseSortFunc(key,reverseSortArr[key])"> 
      {{ label }} 
       <span ng-show="orderByField == key" class="sortIcon"> 
        <span ng-show="reverseSortArr[key]"> 
         <span class="glyphicon glyphicon-chevron-up"></span> 
        </span> 
        <span ng-show="!reverseSortArr[key]"> 
         <span class="glyphicon glyphicon-chevron-down"></span> 
        </span> 
       </span> 
      </a> 
     </th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="cust in customers | orderBy:orderByField:reverseSortArr[orderByField]" class="name_table_dbl"> 
     <td>{{ $index +1 }}</td> 
     <td>{{ cust.fullname }}</td> 
     <td>{{ cust.id_number }}</td> 
     <td>{{ cust.phone }}</td> 
     <td>{{ cust.email }}</td> 
     <td> 
     <button class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></button> 
     <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button> 
     </td> 
    </tr> 

    </tbody> 
</table> 

这是我的HTML代码。这是样本jsFiddle

Answer 1

好吧，我找到了我的answare。我在第th标签中添加了这一行：

<div class="dragHandle"></div> 

现在它工作得很好。这里是更新的example

Answer 2

首先，从用户体验的角度来看，令人困惑的是让一个鼠标单击操作有两个效果：排序和重新排列列。也许你可以添加另一个元素进行排序。通常，它可以是一个三角形，但不能指向上方或下方。

其次，在Angular中，不建议操纵HTML。如果您需要操作HTML，请创建一个指令来执行此操作。 ng-table是一个可用于表格排序，筛选和分页的插件模块。

希望这会有所帮助。