智能表以编程方式排序

Question

我为AngularJS安装了一个使用智能表插件的表。一切看起来都很顺利。我不想让用户单击表头来触发排序，而是以编程方式触发来自角度控制器的排序。在这里的文档中，我没有看到这样做的方法：

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

我在如何做到这一点上找到了一个快速的方法，就是设置表头st-排序属性，然后触发对该元素的click()。

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

然后稍后：

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

Answer 3

这是一种“角度”的方法。写个指令。此指令将访问智能表控制器。它将能够按函数调用控制器的排序。我们将命名新的指令stSortBy。

下面的HTML包括标准智能表合成糖。这里唯一的新属性指令是st-排序-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表控制器的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);
  };
}]);

​