Extjs Grid 排序

首先，需要给所有需要排序的字段设置属性sortable: true，参考示例代码：

// create the grid
var grid = new Ext.grid.GridPanel({
	el:'grid-products',
	width:405,
	height:300,
	title:'Adventure Works Products',
	store: store,
	stripeRows: true,
	loadMask: true,
	enableHdMenu: false,

	// grid columns
	columns:[{
		header: "id",
		id: 'ProductID',
		dataIndex: 'ProductID',
		hidden:true
	},{
		header: "Product Name",
		dataIndex: 'Name',
		width: 200,
		sortable:true
	},{
		header: "Product Number",
		dataIndex: 'ProductNumber',
		width: 100,
		sortable:true
	},{
		header: "Safety Stock Level",
		dataIndex: 'SafetyStockLevel',
		width: 100
	}],
	// put paging bar on the bottom
	bbar: pagingBar
});

这样你就可以在客户端进行排序了。如果需要在服务器端进行排序，则需要设置属性 remoteSort: true， 参考示例代码:

// create the Data Store
var store = new Ext.data.JsonStore({
	root: 'lstProducts',
	totalProperty: 'RowCount',
	idProperty: 'ProductID',
	fields: [
		'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
	],
	remoteSort:true,
	proxy:pmProxy
});

现在，所有排序的信息将汇聚到PageMethodProxy，主要是两个：
* sort : 表示字段的id
* dir : 排序的方式(有两个 ASC 或 DESC)

或许需要修改下PageMethodProxy，参考如下：

Ext.data.PageMethodProxy = function(config){
	Ext.data.PageMethodProxy.superclass.constructor.call(this);
	Ext.apply(this, config);
};

Ext.data.PageMethodProxy.TRANS_ID = 1000;
Ext.data.PageMethodProxy.arr_trans = Array();

Ext.extend(Ext.data.PageMethodProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg) {
        if(this.fireEvent("beforeload", this, params) !== false){
            var p = Ext.apply(params, this.extraParams);
            var transId = ++Ext.data.PageMethodProxy.TRANS_ID;
            var trans = {
                id : transId,
                params : params,
                arg : arg,
                callback : callback,
                scope : scope,
                reader : reader
            };
            if(typeof p.sort == "undefined")
                p.sort = "";
            if(typeof p.dir == "undefined")
                p.dir = "";

            eval("PageMethods." + this.pageMethod + "(p.start,p.limit,p.sort,p.dir,this.handleResponse)");

            Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID] = trans;
        }
        else{
            callback.call(scope||this, null, arg, false);
        }

    },	

    isLoading : function(){
        return this.trans ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    handleResponse : function(o){
        var trans = Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID];
        var result;
        try {
            result = trans.reader.readRecords(o);
        }catch(e){
            this.fireEvent("loadexception", this, o, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        this.trans = false;
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    }
});

服务器端查询排序程序主要写法如下（此处用ASP.NET）

[System.Web.Services.WebMethod]
public static ProductList GetProducts(int PageNumber,int MaximumRows,string SortColumnName, string SortDirection)
{
	//calculating the start row index
	int Start = PageNumber + 1;
	//calculating the end row index
	int End = PageNumber + MaximumRows;

	ProductList productList = new ProductList();
	//setting up sql connection to execute the query
	SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
	sqlConnection.Open();
	//setting up the command object with a parameterized query and sql connection
	using (SqlCommand command = new SqlCommand(GetQuery(SortColumnName,SortDirection), sqlConnection))
	{
		//Creating Sql Start Paramter
		SqlParameter StartParameter = new SqlParameter();
		StartParameter.DbType = DbType.Int32;
		StartParameter.ParameterName = "startRowIndex";
		StartParameter.Value = Start;
		//Creating Sql End Parameter
		SqlParameter EndParameter = new SqlParameter();
		EndParameter.DbType = DbType.Int32;
		EndParameter.ParameterName = "endRowIndex";
		EndParameter.Value = End;
		//Adding Start Parameter to the command object
		command.Parameters.Add(StartParameter);
		//Adding End Parameter to the command object
		command.Parameters.Add(EndParameter);
		//Executing Reader
		using (IDataReader reader = command.ExecuteReader())
		{
			//Creating a list of objects from the fetched rows
			while (reader.Read())
			{
				productList.lstProducts.Add(ConstructProduct(reader));
			}
		}
	}
	//closing the connection
	sqlConnection.Close();
	//Assigning total row count for the given query so that it can
	//be used by the grid to set up total number of pages
	productList.RowCount = GetRowCount();
	return productList;
}

private static String GetQuery(String ColumnName,String SortDirection)
{

	StringBuilder stringBuilder = new StringBuilder();
	stringBuilder.Append(" SELECT * FROM ( ");
	if(!ColumnName.Trim().Equals(String.Empty) && !SortDirection.Trim().Equals(String.Empty))
		stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY "+ColumnName.Trim().ToUpper()+" "+ SortDirection.Trim().ToUpper()+") AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
	else
		stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY (SELECT 0)) AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
	stringBuilder.Append(" FROM	Product ");
	stringBuilder.Append(" ) AS TempTable WHERE row_num>=@startRowIndex AND row_num<=@endRowIndex ");
	return stringBuilder.ToString();
}

评论

4 楼 huangro 2010-10-08  

最好是参照extjs的api来做: http://dev.sencha.com/deploy/dev/docs/
我没碰到过json数据源不能排序的问题, 你是否可以提供数据源瞧瞧?

3 楼 天涯海角tour 2010-09-25  

知道了，谢谢，

2 楼 天涯海角tour 2010-09-25  

为什么 我用XML数据源就可以排序，用json就不行呢，

1 楼 天涯海角tour 2010-09-25  

PageMethodProxy 在哪里啊，找不到啊