Question

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

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

<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

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

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

希望这有帮助。

Answer 2

好吧，我发现了我的answare。我在第一个标记中添加了这一行：

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

现在效果很好。这是更新的example

使用jquery和AngularJS重新排序列拖放

2 个答案: