本文体验datagrid的排序。
□ 思路
当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=CustomerID&order=asc。为了应对变化,把关于分页的封装成基类,其他关于排序或搜索的封装成继承该基类的子类。再把这些子类对象实例传递给服务层方法。
相关Model
//显示表相关
public class Customer
{
public int CustomerID { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
//关于分页封装成基类
public class PageParam { public int PageSize { get; set; }
public int PageIndex { get; set; }
}
//关于搜索或排序封装成子类
public class CustomerParam : PageParam
{
public string SortProperty { get; set; }
public bool Order { get; set; }
}
public class Customer
{
public int CustomerID { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
//关于分页封装成基类
public class PageParam { public int PageSize { get; set; }
public int PageIndex { get; set; }
}
//关于搜索或排序封装成子类
public class CustomerParam : PageParam
{
public string SortProperty { get; set; }
public bool Order { get; set; }
}
服务层根据CustomerParam返回Customer集合,并返回一个输出总记录数
在进行分类的时候,用到了针对 IEnumerable<Customer>扩展方法OrderByWithDirection,如下:
using System.Linq;
namespace DataGridInMVC2.Helpers
{
public static class SortExtension
{
public static IOrderedEnumerable<TSource> OrderByWithDirection<TSource, TKey>(
this IEnumerable<TSource> source,
System.Func<TSource, TKey> keySelector,
bool descending)
{
return descending ? source.OrderByDescending(keySelector) : source.OrderBy(keySelector);
}
}
}
CustomerController
//构建服务类方法所需要的参数实例
var temp = new CustomerParam()
{
PageIndex = pageIndex,
PageSize = pageSize,
SortProperty = sortProperty,
Order = order
};
var service = new Service();
int totalNum = 0;
var customers = service.LoadPageCustomers(temp, out totalNum);
var result = from customer in customers
select new
{
customer.CustomerID,
customer.CompanyName,
customer.ContactName,
customer.ContactTitle,
customer.Country,
customer.Region,
customer.Address,
customer.Fax,
customer.Phone,
customer.City
};
var jsonResult = new {total = totalNum, rows = result};
//序列化成json字符串
string str = JsonSerializeHelper.SerializeToJson(jsonResult);
return Content(str);
}
}
}
Customer/Index 视图
width: 730,
height: 400,
title: 'Customer列表',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//CustomerID,CompanyName,ContactName,ContactTitle,Country,Region,Address,Fax,Phone,City
{ field: 'CustomerID', title: '编号',sortable: true },
{ field: 'CompanyName', title: '客户名称', sortable: true },
{ field: 'ContactName', title: '联系人名称', sortable: true },
{ field: 'ContactTitle', title: '职位', sortable: true },
{ field: 'Address', title: '地址', sortable: true },
{ field: 'City', title: '城市名称', sortable: true },
{ field: 'Region', title: '区域' },
{ field: 'Country', title: '国家' },
{ field: 'Phone', title: '电话', sortable: true },
{ field: 'Fax', title: '传真', sortable: true }
]],
queryParams: params, //搜索json对象
sortName: 'CustomerID', //初始排序字段
sortOrder: 'asc' //初始排序方式
});
}
</script>
}
height: 400,
title: 'Customer列表',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//CustomerID,CompanyName,ContactName,ContactTitle,Country,Region,Address,Fax,Phone,City
{ field: 'CustomerID', title: '编号',sortable: true },
{ field: 'CompanyName', title: '客户名称', sortable: true },
{ field: 'ContactName', title: '联系人名称', sortable: true },
{ field: 'ContactTitle', title: '职位', sortable: true },
{ field: 'Address', title: '地址', sortable: true },
{ field: 'City', title: '城市名称', sortable: true },
{ field: 'Region', title: '区域' },
{ field: 'Country', title: '国家' },
{ field: 'Phone', title: '电话', sortable: true },
{ field: 'Fax', title: '传真', sortable: true }
]],
queryParams: params, //搜索json对象
sortName: 'CustomerID', //初始排序字段
sortOrder: 'asc' //初始排序方式
});
}
</script>
}
最终效果:
作者:darrenji