angularjs smart-table 以编程方式排序

Question

我使用 AngularJS 的 smart-table 插件设置了 table。一切似乎都运行良好。我不想让用户单击 table header 来触发排序，而是希望以编程方式从我的 Angular 控制器触发排序。我在此处的文档中看不到执行此操作的方法：

http://lorenzofox3.github.io/smart-table-website/

我是不是忽略了什么？

Answer 1

在 JSFiddle 上找到这个，可能对你有帮助：http://jsfiddle.net/vojtajina/js64b/14/

<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

<table ng:controller="SortableTableCtrl">
    <thead>
        <tr>
            <th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
            <td>{{row.a}}</td>
            <td>{{row.b}}</td>
            <td>{{row.c}}</td> 
        </tr>
    </tbody>
</table>

Answer 2

我发现的一个快速破解方法是设置 table header st-sort 属性然后在该元素上触发 click()

<tr>
  <th id="myelement" st-sort="date" st-sort-default="reverse">Date</th> 
  ...
</tr>

然后：

 setTimeout(function() {
      document.getElementById('myelement').click()        
    }, 
  0);

Answer 3

这是 'angular' 的方法。写一个指令。该指令将可以访问智能 table 控制器。它将能够调用控制器的排序功能。我们将新指令命名为 stSortBy。

下面的HTML包括标准的智能table合成糖。这里唯一的新属性指令是 st-sort-by。这就是神奇的地方。它绑定到范围变量 sortByColumn。这是要排序的列的字符串值

<table st-sort-by="{{sortByColumn"}}" st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="column1">Person</th>
<th st-sort="column2">Person</th>
</tr>
</thead>
</table>

<button ng-click="toggleSort()">Toggle sort columns!</button>

这是挂接到 st table 控制器的 stSortBy 指令

app.directive('stSortBy', function() {
    return {
        require: 'stTable',
        link: function (scope, element, attr, ctrl) {
            attr.$observe('stSortBy', function (newValue) {
                if(newValue) {
                    // ctrl is the smart table controller
                    // the second parameter is for the sort order
                    ctrl.sortBy(newValue, true);
                }
            });
        }
    };
});

这是控制器。控制器在其范围内设置排序依据

app.controller("MyTableWrapperCtrl", ["$scope", function($scope) {
  $scope.sortByColumn = 'column2';
  
  $scope.toggleSort = function() {
     $scope.sortByColumn = $scope.sortByColumn === 'column2' ? 'column1' : 'column2';
     // The time out is here to guarantee the attribute selector in the directive
     // fires. This is useful is you do a programmatic sort and then the user sorts
     // and you want to programmatically sort back to the same column. This forces a sort, even if you are sorting the same column twice.
     $timeout(function(){
      $scope.sortByColumn = undefined;
     }, 0);
  };
}]);

angularjs smart-table 以编程方式排序

angularjs smart-table programmatically sort

javascript

angularjs

smart-table