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

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

在前端使用jqGrid实现双字段排序(日期B和时分秒C),需调整前端配置和后端处理。以下是具体步骤:

前端jqGrid配置

  1. 启用多列排序‌:通过serializeGridData回调动态添加第二个排序字段。
  2. 修改排序参数‌:当排序字段为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#处理

  1. 解析排序参数‌:接收sidxsord,拆分为多个字段和顺序。
  2. 构建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);
}

说明

  1. 动态排序处理‌:前端在用户对B列排序时,自动附加C字段,确保数据先按B排序,再按C排序。
  2. 安全性‌:后端验证排序字段,避免SQL注入。
  3. 灵活性‌:支持多字段不同排序顺序,如B ASC, C DESC

测试案例

  • 点击B列(升序)‌:发送sidx=B,Csord=asc,asc,按B升序后C升序排列。
  • 再次点击B列(降序)‌:发送sidx=B,Csord=desc,desc,按B降序后C降序排列。
  • 其他字段排序‌:例如点击D列(如配置可排序),仅按D字段排序。

此方案确保在按日期B排序时,时分秒C作为次要排序条件,提升用户体验和数据展示的准确性。