Question

我在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>

Answer 1

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

我创建了一个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指令）。

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

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

1 个答案: