1

我想在 Angular 智能表中添加摘要行。行不应排序，应添加到最后。

我曾尝试过但无法做到这一点，并且我进行了很多搜索，但无法在 Google 上找到更多信息。

谁能告诉我添加摘要行的方法应该是什么？

4

1 回答 1

1

这种排序可以使用自定义排序算法完成，方法是在 globalConfig 下的 sortAlgorithm 中添加相同的算法（参见智能表文档）。

试试这个，

在 html 中，

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="smart-table.debug.js"></script>
  </head>

   <body ng-controller="mainCtrl">
    <h1>{{greetings}} Plunker!</h1>
    <smart-table config="globalConfig" columns="columnsConfig" rows="items"></smart-table>
  </body>

</html>

在 js 文件中，

angular.module('myApp',['smartTable.table'])
.controller('mainCtrl',['$scope',function(scope,$filter){
  scope.greetings="world";


      scope.items=[
    {name:'mahesh',salary:10000,},
    {name:'sachin',salary:15000},
    {name:'varun',salary:12000},
    {name:'vijay',salary:11000},
    {name:'prem',salary:12500},
    {name:'gandhi',salary:13000},
    {name:'sathish',salary:14500},
    {name:'ram',salary:20000},
    {name:'siva',salary:22000},
    {name:'dilli',salary:18000}
    ];
    var i=0;
    scope.totalSalary=0;
    scope.calSalary=function(){
    for(i=0;i<scope.items.length;i++){
      scope.totalSalary=scope.totalSalary+scope.items[i].salary;
    }
    return scope.totalSalary;
    }
    var temp={name:'total',salary:scope.calSalary()};
    scope.items.push(temp);
  scope.globalConfig={
    isPaginationEnabled:false,
    selectionMode:'single',
    sortAlgorithm:function customSortAlgorithm(arrayRef, sortPredicate, reverse) {

    var i=0;
    var sortTemp='';
    var n=arrayRef.length-1;
    for (i = 0; i < n; ++i)
    {
        for (j = i + 1; j < n; ++j)
        {

          if(sortPredicate==='salary'){
          switch(reverse) {
    case true:
        if (arrayRef[i].salary > arrayRef[(j)].salary)
            {
                sortTemp=arrayRef[i];
                arrayRef[i]=arrayRef[j];
                arrayRef[j]=sortTemp;
            }
        break;
    case false:
         if (arrayRef[i].salary < arrayRef[(j)].salary)
            {
                sortTemp=arrayRef[i];
                arrayRef[i]=arrayRef[j];
                arrayRef[j]=sortTemp;
            }
        break;
    default:

}}

          if(sortPredicate==='name'){
          switch(reverse) {
    case true:
        if (arrayRef[i].name > arrayRef[(j)].name)
            {
                sortTemp=arrayRef[i];
                arrayRef[i]=arrayRef[j];
                arrayRef[j]=sortTemp;
            }
        break;
    case false:
         if (arrayRef[i].name < arrayRef[(j)].name)
            {
                sortTemp=arrayRef[i];
                arrayRef[i]=arrayRef[j];
                arrayRef[j]=sortTemp;
            }
        break;
    default:

}}
        }
    }
   return arrayRef;

}
  };

  scope.columnsConfig=[
    {label:'name',map:'name'},
    {label:'salary',map:'salary'}
    ];
}]);

请看看这个plunker是否相同。

希望这能解决你的问题:)

于 2014-07-25T20:29:32.747 回答