Extjs4--grid表格的分组和统计

最新推荐文章于 2017-07-13 18:03:00 发布

原创最新推荐文章于 2017-07-13 18:03:00 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #Grid表格 #分组 #统计 #可编辑

Extjs 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用 Extjs4 构建具备分组和统计功能的 Grid 表格，包括设置列模型、创建数据存储、实现单元格编辑及自定义分组汇总等。演示了不同类型的统计计算，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4--grid表格的分组和统计

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" />
<title>Insert title here</title>
<script type="text/javascript">
	Ext.onReady(function(){
		// Init the singleton.  Any tag-based quick tips will start working.
		Ext.tip.QuickTipManager.init();
		//定义列模型
		Ext.define('Task', {
		    extend: 'Ext.data.Model',
		    idProperty: 'taskId',
		    fields: [
		        {name: 'projectId', type: 'int'},
		        {name: 'project', type: 'string'},
		        {name: 'taskId', type: 'int'},
		        {name: 'description', type: 'string'},
		        {name: 'estimate', type: 'float'},
		        {name: 'rate', type: 'float'},
		        {name: 'cost', type: 'float'},
		        {name: 'due', type: 'date', dateFormat:'m/d/Y'}
		    ]
		});
		//数据
		var data = [
		    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
		    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
		    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
		    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
		    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
		    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
		    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
		    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
		    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
		    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
		];
		//创建Store
	    var store = Ext.create('Ext.data.Store', {
	        model: 'Task',
	        data: data,
	        //按照due字段升序排序
	        sorters: {property: 'due', direction: 'ASC'},
	        //以project字段进行分组
	        groupField: 'project'
	    });
            //CellEditing是可以在一个网格单元进行编辑的插件。同一时刻只有一个单一的网格单元将被编辑
	    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
	    	//点击1次切换状态，只能是1和2.
	        clicksToEdit: 1
	    });
	    var showSummary = true;
	    var grid = Ext.create('Ext.grid.Panel', {
	        width: 650,
	        height: 450,
	        frame: true,
	        title: 'Sponsored Projects',
	        iconCls: 'icon-grid',
	        renderTo: document.body,
	        store: store,
	        plugins: [cellEditing],//在此添加可编辑插件
	        dockedItems: [{
	        	//工具条显示在最上面
	            dock: 'top',
	            xtype: 'toolbar',
	            items: [{
	                tooltip: '点击切换总结行的可见性',
	                text: '切换总结',
	                enableToggle: true,
	                pressed: true,
	                handler: function(){
	                    var view = grid.getView();
	                    showSummary = !showSummary;
	                    view.getFeature('group').toggleSummaryRow(showSummary);
	                    view.refresh();
	                }
	            }]
	        }],
	        features: [{
	            id: 'group',
	            //groupingsummary 将在每一组的底部是提供了一个汇总行。可以进行count、sum、min、max、average
	            ftype: 'groupingsummary',
	            //设置分组的显示组名。此处显示的是被指定分组列的值
	            groupHeaderTpl: '{name}',
	            hideGroupedHeader: true,
                enableGroupingMenu: false
	        }],
	        columns: [{
	            text: 'Task',
	            flex: 1,
	            tdCls: 'task',
	            sortable: true,
	            dataIndex: 'description',
	            hideable: false,
	            //统计该分组内记录个数
	            summaryType: 'count',
	            summaryRenderer: function(value, summaryData, dataIndex) {
	                return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
	            }
	        }, {
	            header: 'Project',
	            width: 180,
	            sortable: true,
	            dataIndex: 'project'
	        }, {
	            header: 'Due Date',
	            width: 80,
	            sortable: true,
	            dataIndex: 'due',
	             //统计最大值
	            summaryType: 'max',
	            renderer: Ext.util.Format.dateRenderer('m/d/Y'),
	            summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
	            field: {
	                xtype: 'datefield'
	            }
	        }, {
	            header: 'Estimate',
	            width: 75,
	            sortable: true,
	            dataIndex: 'estimate',
	            //统计总和
	            summaryType: 'sum',
	            renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
	                return value + ' hours';
	            },
	            summaryRenderer: function(value, summaryData, dataIndex) {
	                return value + ' hours';
	            },
	            field: {
	                xtype: 'numberfield'
	            }
	        }, {
	            header: 'Rate',
	            width: 75,
	            sortable: true,
	            renderer: Ext.util.Format.usMoney,
	            summaryRenderer: Ext.util.Format.usMoney,
	            dataIndex: 'rate',
	            //统计平均值
	            summaryType: 'average',
	            field: {
	                xtype: 'numberfield'
	            }
	        }, {
	            id: 'cost',
	            header: 'Cost',
	            width: 75,
	            sortable: false,
	            groupable: false,
	            renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
	                return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
	            },
	            dataIndex: 'cost',
	            //自定义统计方式
	            summaryType: function(records){
	                var i = 0,
	                    length = records.length,
	                    total = 0,
	                    record;
	                for (; i < length; ++i) {
	                    record = records[i];
	                    total += record.get('estimate') * record.get('rate');
	                }
	                return total;
	            },
	            summaryRenderer: Ext.util.Format.usMoney
	        }]
	    });
	});
</script>
</head>
<body>
</body>
</html>

运行结果：

单元格可编辑，修改完后自动统计。

点击【切换总结】按钮后，每个分组总结记录行不可见。

每个分组均可伸缩扩展

有时候，我们需要自定义显示的组名

我们只需要做简单的修改即可。

 //groupHeaderTpl: '{name}',
 //自定义组名
 groupHeaderTpl: [
       'Group: ',
       '{name:this.formatName}',
       {
           formatName: function(name) {
        	     if(name.indexOf('Field Anchoring')>-1) return '表单属性';
           	 else if(name.indexOf('Single-level Grouping')>-1) return '表格分组';
           	 else if(name.indexOf('Summary Rows')>-1) return '表格总计';
           }
       }
   ],

运行结果：