jEasyUI 创建页脚摘要学习笔记

在 jEasyUI 中，可以使用 datagrid 组件来展示数据列表。其中，datagrid 组件提供了很多列格式化的方式，包括页脚摘要（footer）。

1. 创建页脚摘要

要创建页脚摘要，需要在 datagrid 的 columns 属性中设置对应列的 footer 属性。下面是一个简单的例子：

htmlCopy Code
<table id="myDataGrid">
</table>

javascriptCopy Code
$('#myDataGrid').datagrid({
  columns:[[
    {field:'name',title:'Name',width:100},
    {field:'age',title:'Age',width:100,footer:'Total:'},
    {field:'city',title:'City',width:100}
  ]],
  data:[{
    name:'John Smith',
    age:30,
    city:'New York'
  },{
    name:'Jane Doe',
    age:25,
    city:'San Francisco'
  }],
  showFooter:true
});

在上面的例子中，我们在第二列的 footer 属性中写入了字符串 'Total:'。这将在页脚中显示一个带有 'Total:' 字符串的单元格。

2. 统计数据并显示

在实际应用中，通常需要统计表格中某列的数据，并在页脚中显示总数、平均数等信息。要实现这个功能，可以使用 datagrid 的 onLoadSuccess 事件和 reloadFooter 方法。

下面是一个统计年龄总和的例子：

javascriptCopy Code
$('#myDataGrid').datagrid({
  columns:[[
    {field:'name',title:'Name',width:100},
    {field:'age',title:'Age',width:100,footer:'Total:'},
    {field:'city',title:'City',width:100}
  ]],
  data:[{
    name:'John Smith',
    age:30,
    city:'New York'
  },{
    name:'Jane Doe',
    age:25,
    city:'San Francisco'
  }],
  showFooter:true,
  onLoadSuccess:function(data){
    var totalAge = 0;
    for(var i=0; i<data.rows.length; i++){
      totalAge += data.rows[i].age;
    }
    $('#myDataGrid').datagrid('reloadFooter',[{
      age:totalAge
    }]);
  }
});

在上面的代码中，我们通过 onLoadSuccess 事件计算出年龄总和，并使用 reloadFooter 方法更新页脚中 age 列的值。注意，reloadFooter 方法需要传入一个数组作为参数，数组中的每个元素对应一个列的新值。

实例

下面是一个更完整的例子，展示了如何在 jEasyUI 中创建带有页脚摘要的数据列表，并统计列数据并在页脚中显示总和。

htmlCopy Code
<table id="myDataGrid">
</table>

javascriptCopy Code
$('#myDataGrid').datagrid({
  columns:[[
    {field:'name',title:'Name',width:100},
    {field:'age',title:'Age',width:100,footer:'Total:'},
    {field:'city',title:'City',width:100}
  ]],
  data:[{
    name:'John Smith',
    age:30,
    city:'New York'
  },{
    name:'Jane Doe',
    age:25,
    city:'San Francisco'
  },{
    name:'Jack Johnson',
    age:40,
    city:'Los Angeles'
  }],
  showFooter:true,
  onLoadSuccess:function(data){
    var totalAge = 0;
    for(var i=0; i<data.rows.length; i++){
      totalAge += data.rows[i].age;
    }
    $('#myDataGrid').datagrid('reloadFooter',[{
      age:totalAge
    }]);
  }
});

在上面的代码中，我们创建了一个带有三列（姓名、年龄、城市）的数据列表，并设置第二列的 footer 属性为 'Total:'。在 onLoadSuccess 事件中，我们计算了年龄的总和，并调用 reloadFooter 方法更新页脚中 age 列的值。最终的效果如下图所示：