常规功能和模块自定义系统 (cfcmms)—042模块Grid的排序和筛选

042模块Grid的排序和筛选

　　一、排序

　　Grid界面排序可以点击列头直接来进行，这个是很方便。但是还有二个问题需要解决：无法取消排序至默认，单字段和多字段排序不可以方便切换。为了解决这二个功能，在pagingtoolbar的前面加了一个SplitButton按钮来控制这二个操作。

　　在上面的图片中可以看出，新增了一个按钮，下面有一些菜单来控制grid的排序的一些功能。并且显示当前排序的字段以及顺序。下面即是这个控件的源码，这个控件应该可以适用于任何的grid之中。并不是本系统专用。

/**
 *
 * grid 里面控制排序的一些功能，主要有 单一字段排序，多字段排序，清除排序字段
 *
 */
Ext
		.define(
				'app.module.widget.GridSortButton',
				{
					extend : 'app.ux.ButtonTransparent',
					alias : 'widget.gridsortbutton',
					iconCls : 'x-fa fa-sort-amount-asc',
					tooltip : '排序设置',
					listeners : {
						menushow : function(button, menu, eOpts) {
							var grid = button.up('grid'), store = grid.getStore();
							for (var i = menu.items.length - 1; i > 0; i--)
								if (menu.items.getAt(i).sortfield)
									menu.remove(menu.items.getAt(i), true);
							if (store.getSorters().length === 0) {
								menu.items.getAt(0).setDisabled(true);
								menu.items.getAt(4).setVisible(false);
								menu.items.getAt(5).setVisible(false);
							} else {
								menu.items.getAt(0).setDisabled(false);
								menu.items.getAt(4).setVisible(true);
								menu.items.getAt(5).setVisible(true);
								store
										.getSorters()
										.each(
												function(sort) {
													var menuText = sort.getProperty();
													Ext.each(grid.getColumns(), function(column) {
														if (column.dataIndex == sort.getProperty()) {
															menuText = column.menuText;
															return false;
														}
													});
													menu
															.add({
																text : menuText,
																iconCls : sort.getDirection() == 'ASC' ? 'x-fa fa-sort-amount-asc'
																		: 'x-fa fa-sort-amount-desc',
																sortfield : true
															})
												})
							}
						}
					},
					menu : {
						items : [ {
							text : '恢复默认排序',
							handler : function(button) {
								var store = button.up('grid').getStore();
								store.getSorters().removeAll();
								store.load();
							}
						}, '-', {
							text : '单字段排序',
							xtype : 'menucheckitem',
							checked : true,
							group : 'sorttype',
							handler : function(button) {
								var grid = button.up('grid'), store = grid.getStore();
								grid.multiColumnSort = false;
								if (grid.lockedGrid) {
									grid.lockedGrid.multiColumnSort = false;
									grid.normalGrid.multiColumnSort = false;
								}
								store.getSorters().removeAll();
							}
						}, {
							text : '多字段排序',
							xtype : 'menucheckitem',
							group : 'sorttype',
							handler : function(button) {
								var grid = button.up('grid'), store = grid.getStore();
								grid.multiColumnSort = true;
								if (grid.lockedGrid) {
									grid.lockedGrid.multiColumnSort = true;
									grid.normalGrid.multiColumnSort = true;
								}
							}
						}, '-', {
							text : '当前排序'
						} ]
					},

					initComponent : function() {
						this.callParent(arguments);
					}
				});

　　二、筛选条件的显示和清除。

　　Grid列头中提供了筛选条件设置的地方，但是显示和清除都不太方便，为此又做了一个按钮来管理这二个功能。

　　在选择了一些筛选条件之后，会在下面的按钮里体现出来。

/**
 *
 * grid 里面控制筛选的一些功能，显示筛选条件，清除筛选条件
 *
 */
Ext.define('app.module.widget.GridFilterButton', {
	extend : 'app.ux.ButtonTransparent',
	alias : 'widget.gridfilterbutton',
	iconCls : 'x-fa fa-filter',
	tooltip : '筛选条件设置',
	listeners : {
		menushow : function(button, menu, eOpts) {
			var grid = button.up('grid'), store = grid.getStore();
			for (var i = menu.items.length - 1; i > 0; i--)
				if (menu.items.getAt(i).filterfield)
					menu.remove(menu.items.getAt(i), true);
			if (store.getFilters().length === 0) {
				menu.items.getAt(0).setDisabled(true);
				menu.items.getAt(1).setVisible(false);
				menu.items.getAt(2).setVisible(false);
			} else {
				menu.items.getAt(0).setDisabled(false);
				menu.items.getAt(1).setVisible(true);
				menu.items.getAt(2).setVisible(true);
				store.getFilters().each(
						function(filter) {
							var menuText = filter.dataIndex;
							Ext.each(grid.getColumns(), function(column) {
								if (column.dataIndex == filter.getProperty()) {
									menuText = column.menuText;
									return false;
								}
							});
							menu.add({
								text : menuText + ' '
										+ button.changeOperatorToText(filter.getOperator())
										+ ' <span style="color:blue;">' + filter.serialize().value
										+ "</span>",
								iconCls : 'x-fa fa-filter',
								filterfield : true
							})
						})
			}
		}
	},
	menu : {
		items : [ {
			text : '清除所有筛选条件',
			iconCls : 'x-fa fa-eraser',
			handler : function(button) {
				button.up('grid').filters.clearFilters()
			}
		}, '-', {
			text : '当前筛选条件'
		} ]
	},

	initComponent : function() {
		this.callParent(arguments);
	},

	changeOperatorToText : function(operator) {
		switch (operator) {
		case 'gt':
			return '大于';
		case 'lt':
			return '小于';
		case 'eq':
			return '等于';
		case 'like':
			return '包含文字';
		}
		return operator;
	}

});