使用Angularjs重新排序html表中的列

Posted 2021-04-09

我在html表中有一定数量的可用列。只要用户过滤掉他们想要的列，我就会显示仅包含所选列的表。

现在，我想给用户提供选项，以便设置显示列的顺序，首先是哪一列，哪一列是第二列。我有列表和功能，可以在选择列表中重新排序列，请查看下面的屏幕截图：

我想知道如何按照与右侧列表中设置的顺序相同的顺序对表中的列进行排序。

这是我到目前为止的代码：

                        <table class="table table-hover" id="basicTable">
                            <thead>
                                <tr>
                                    <th ng-show="ShowDescription">Description</th>
                                    <th ng-show="ShowDeviceId">Device ID</th>
                                    <th ng-show="ShowUpdateRequired">Update Required</th>
                                    <th ng-show="ShowOpenTime">Open Time</th>
                                    <th ng-show="ShowOpenTimeAda">Open Time Ada</th>
                                    <th ng-show="ShowKeypadCode">Keypad Code</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="(k, v) in assets | filter: appliedFilter">
                                    <td class="v-align-middle" ng-show="ShowDescription">
                                        <p>{{v.description}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowDeviceId">
                                        <p>{{v.extdoorid}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowUpdateRequired">
                                        <p><span ng-if="v.updaterequired == '1'">Yes</span><span ng-if="v.updaterequired == '0'">No</span></p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowOpenTime">
                                        <p>{{v.opentime}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowOpenTimeAda">
                                        <p>{{v.opentimeada}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowKeypadCode">
                                        <p>{{v.keypadcode}}</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

答案

一个建议是使用数组作为当前选定的列，当然还有一个数组用于当前显示的资产。

我创建了一个sample，仅用于演示逻辑。

$scope.columns = [
    {id: "col1", description: "col 1", show: true},
    {id: "col2", description: "col 2", show: true},
    {id: "col3", description: "col 3", show: false},
    {id: "col4", description: "col 4", show: true}
];

$scope.assets = [
    {col1: "Some value 1", col2: "Another value 1", col3: "Col 3 1", col4: "Val. 1"},
    {col1: "Some value 2", col2: "Another value 2", col3: "Col 3 2", col4: "Val. 2"},
    {col1: "Some value 3", col2: "Another value 3", col3: "Col 3 3", col4: "Val. 3"}
];

而html中的一个简单表是：

<table class="table table-hover">

  <thead>
    <tr>
      <th ng-repeat="column in columns | filter: {show: true}">{{column.description}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="asset in assets">
      <td ng-repeat="column in columns | filter: {show: true}">{{asset[column.id]}}</td>
    </tr>
  </tbody>

</table>

如果更改$scope.columns数组中列的顺序，您将看到html表中发生的更改（通过ng-repeat指令）。

希望您能获得一些有用的提示和想法，以满足您的需求。