如何在ui-grid中应用排序?

时间:2018-11-20 04:44:42

标签: angularjs angular-ui-grid ui-grid

我有一个我正在使用ui-grid的angularjs项目。

正如您在我的代码中看到的那样,单元格模板中有一些属性。我必须根据“ 评分百分比”执行排序。

因此,我正在尝试编写一种需要row.entity属性的排序算法。

我的问题是,如何在row.entity中添加评分百分比。

使用“评分百分比”进行排序的正确方法是什么?

下面是我的代码:

 define([
    'angular'
  ], function (angular) {

    function SelectToolController($scope, $timeout, $filter) {
      var vm = this,
      _gridApi,
      _cellTemplate,
      _columnDefs,
      _starRatingTemplate,
      _starRatingColumn;

 _starRatingTemplate =[
       '<div class="ui-grid-cell-contents ">',
          '<div class="opr-star-rating" >',
            '<opr-star-rating rating-percentage="{{rowRenderIndex}}"',
              'total-count="23"',
              'suffix-display="true"',
              'rating-display="true"',
              'count-display="22">',
            '</opr-star-rating>',
          '</div>',
          '</div>'
      ].join('');

_starRatingColumn = {
          name: 'starRating',
          cellTemplate: _starRatingTemplate,
          displayName: 'Rating',
          enableFiltering: false,
          enableSorting: true,
          cellClass: 'star-column',
          enableHiding: false,
          enableRowSelection: true,
        }
 _columnDefs.push(_starRatingColumn);

})();

1 个答案:

答案 0 :(得分:0)

您可以定义自定义排序功能,然后将此功能链接到列定义。

 $scope.sortFun=function(a, b) { 
   ///.... your logic
 }

_starRatingColumn = {
      name: 'starRating',
      cellTemplate: _starRatingTemplate,
      displayName: 'Rating',
      enableFiltering: false,
      enableSorting: true,
      cellClass: 'star-column',
      enableHiding: false,
      enableRowSelection: true,
      'sortingAlgorithm': $scope.sortFun
    }

更改模板。

'<div class="ui-grid-cell-contents ">',
      '<div class="opr-star-rating" ng-class="col.colIndex() >',
        '<opr-star-rating rating-percentage="{{row.entity}}"',
          'total-count="23"',
          'suffix-display="true"',
          'rating-display="true"',
          'count-display="22">',
        '</opr-star-rating>',
      '</div>',
      '</div>'