在前端使用jqGrid实现双字段排序

在前端使用jqGrid实现双字段排序(日期B和时分秒C),需调整前端配置和后端处理。以下是具体步骤:
前端jqGrid配置
- 启用多列排序:通过
serializeGridData
回调动态添加第二个排序字段。 - 修改排序参数:当排序字段为B时,自动附加C字段,并设置对应顺序。
$("#grid").jqGrid({
url: '/YourController/GetData',
datatype: 'json',
colModel: [
{ name: 'A', key: true, hidden: true },
{ name: 'B', sortable: true },
{ name: 'C', sortable: true },
{ name: 'D', sortable: false }
],
sortname: 'B', // 默认按B排序
sortorder: 'asc',
serializeGridData: function(postData) {
// 当排序字段是B时,添加C作为次要排序字段
if (postData.sidx === 'B') {
postData.sidx = 'B,C';
// 设置C的排序顺序与B相同,如B是asc则C也asc
postData.sord = postData.sord + ',' + postData.sord;
}
return postData;
},
// 其他配置(如分页、自动宽度等)
});
后端C#处理
- 解析排序参数:接收
sidx
和sord
,拆分为多个字段和顺序。 - 构建SQL排序子句:生成安全的
ORDER BY
语句。
public ActionResult GetData(string sidx, string sord, int page, int rows)
{
// 解析排序字段和顺序
var sortFields = sidx.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
var sortOrders = sord.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
var orderByClause = new StringBuilder();
for (int i = 0; i < sortFields.Length; i++)
{
string field = sortFields[i];
string order = i < sortOrders.Length ? sortOrders[i] : "asc"; // 默认升序
// 验证字段合法性,防止SQL注入
if (IsValidField(field))
{
if (orderByClause.Length > 0)
orderByClause.Append(", ");
orderByClause.AppendFormat("{0} {1}", field, order.ToUpper());
}
}
// 构建查询
string sql = "SELECT A, B, C, D FROM YourTable";
if (orderByClause.Length > 0)
sql += " ORDER BY " + orderByClause.ToString();
// 执行查询并返回结果...
}
private bool IsValidField(string field)
{
string[] validFields = { "A", "B", "C", "D" };
return validFields.Contains(field);
}
说明
- 动态排序处理:前端在用户对B列排序时,自动附加C字段,确保数据先按B排序,再按C排序。
- 安全性:后端验证排序字段,避免SQL注入。
- 灵活性:支持多字段不同排序顺序,如
B ASC, C DESC
。
测试案例
- 点击B列(升序):发送
sidx=B,C
和sord=asc,asc
,按B升序后C升序排列。 - 再次点击B列(降序):发送
sidx=B,C
和sord=desc,desc
,按B降序后C降序排列。 - 其他字段排序:例如点击D列(如配置可排序),仅按D字段排序。
此方案确保在按日期B排序时,时分秒C作为次要排序条件,提升用户体验和数据展示的准确性。