Angular 智能表 + 添加汇总行答案

【问题标题】：Angular Smart table + add summary rowsAngular 智能表 + 添加汇总行
【发布时间】：2014-08-14 14:29:46
【问题描述】：

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

我尝试过但无法实现，我搜索了很多但无法在 Google 上找到更多信息。

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

【问题讨论】：

这是你期望的吗？看到这个plunker
不...我想在标题下方有一行显示摘要。假设我有一个名为 Amount 的列。然后在摘要行中它应该显示单元格中的金额总和
或者这样怎么样？，看这个plunker
只有这样，但你已经为它创建了额外的跨度。我只想要智能表中的功能。
但是我能知道你为什么要在智能表中使用相同的东西吗？因为你的输出和你要求的一样。

标签： angularjs smart-table

【解决方案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 以获取相同的信息。

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

【讨论】：