Umordnen von Spalten in HTML-Tabelle mit angularjs

Question

Ich habe eine bestimmte Anzahl von verfügbaren Spalten in HTML-Tabelle. Sobald der Benutzer herausfiltert, welche Spalten er möchte, zeige ich die Tabelle nur mit den ausgewählten Spalten an. Nun möchte ich dem Benutzer die Option geben, auch die Reihenfolge der angezeigten Spalten festzulegen, welche Spalte zuerst kommt, welche Sekunde. ich die Liste und die Funktionalität für Neuordnen der Spalten in einer Auswahlliste bereit haben, überprüfen Sie bitte die Abbildung unten:

Ich möchte wissen, wie kann ich die Spalten in der Tabelle in der gleichen Reihenfolge sortieren tatsächlich, wie sie sind in der Liste auf der rechten Seite einstellen.

Dies ist der Code, den ich habe bisher:

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

Vielen Dank im Voraus, Laziale

Answer 1

Ein Vorschlag ein Array für die aktuell ausgewählten Spalten verwendet, und natürlich ein Array für die aktuell angezeigten Vermögenswerte .

Ich habe eine sample nur für die Demonstration der Logik erstellt.

$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"} 
]; 

Und eine einfache Tabelle in html ist:

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

Wenn Sie die Reihenfolge der Spalten innerhalb $scope.columns Array ändern, müssen Sie die Änderung geschieht in HTML-Tabelle (über ng-Repeat-Richtlinie) sehen .

Hoffen Sie, dass Sie einige nützliche Tipps und Ideen erhalten, die Ihren Bedürfnissen entsprechen.