基于C#的JqGrid日期搜索异常问题求助

首先得先指出你配置里的一个小问题：你的fecha列的formatoptions中，srcformat设置成了'd/m/Y'，但你的原始JSON日期是微软格式的/Date(1514869200000)/，这会导致jqGrid内部解析日期时可能出现隐性问题。先把这个修正：

{ 
  label: 'Fecha Inicio', 
  name: 'fecha', 
  index: 'fecha', 
  formatter: 'date', 
  formatoptions: { 
    newformat: 'd/m/Y', 
    srcformat: 'microsoft' // 改成这个，匹配原始的/Date(...)格式
  }, 
  searchoptions: { sopt: ['cn', 'eq', 'gt'] }, 
  width: '150px' 
}

接下来解决核心问题：jqGrid默认会用数据源中的原始字段值（也就是那个/Date(...)字符串）来执行搜索，而不是你格式化后的02/01/2018。要让搜索匹配显示的日期格式，有两个常用方案：

方案一：前端转换搜索输入值为原始日期格式 #

通过给searchoptions添加dataInit和dataEvents，让用户输入的显示格式日期自动转换成jqGrid能识别的原始格式，这样搜索时提交的就是正确的匹配值：

{ 
  label: 'Fecha Inicio', 
  name: 'fecha', 
  index: 'fecha', 
  formatter: 'date', 
  formatoptions: { 
    newformat: 'd/m/Y', 
    srcformat: 'microsoft' 
  }, 
  searchoptions: { 
    sopt: ['cn', 'eq', 'gt'],
    dataInit: function(elem) {
      // 用datepicker确保输入格式统一，避免用户手动输入错误
      $(elem).datepicker({
        dateFormat: 'dd/mm/yy', // 和显示格式一致
        changeYear: true,
        changeMonth: true
      });
    },
    dataEvents: [{
      type: 'change',
      fn: function(e) {
        var inputVal = $(e.target).val();
        if (inputVal) {
          // 把dd/mm/yyyy格式转换成/Date(时间戳)/格式
          var dateParts = inputVal.split('/');
          // 注意JS的月份是从0开始的
          var targetDate = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
          var timestamp = targetDate.getTime();
          // 替换输入框的值为原始格式，让jqGrid用这个值搜索
          $(e.target).val('/Date(' + timestamp + ')/');
        }
      }
    }]
  }, 
  width: '150px' 
}

这个方案的好处是不需要改动后端，只在前端处理转换，适合后端无法修改的场景。

方案二：后端统一返回格式化后的日期字符串 #

如果可以修改后端代码，推荐直接让C#返回的JSON中fecha字段是d/m/Y格式的字符串，而不是微软的/Date(...)格式。这样前后端日期格式统一，搜索时直接用显示格式匹配即可。

在ASP.NET MVC中，你可以全局配置JSON序列化规则：

// 在Global.asax的Application_Start方法中添加
JsonSerializerSettings jsonSettings = new JsonSerializerSettings();
jsonSettings.DateFormatString = "dd/MM/yyyy";
JsonConvert.DefaultSettings = () => jsonSettings;

配置完成后，后端返回的JSON中fecha字段会变成"02/01/2018"，此时你可以简化jqGrid的配置：

{ 
  label: 'Fecha Inicio', 
  name: 'fecha', 
  index: 'fecha', 
  formatter: 'date', 
  formatoptions: { 
    newformat: 'd/m/Y', 
    srcformat: 'd/m/Y' // 现在原始值就是这个格式了
  }, 
  searchoptions: { sopt: ['cn', 'eq', 'gt'] }, 
  width: '150px' 
}

这个方案更简洁，避免了前端的额外转换逻辑，减少出错概率。

内容的提问来源于stack exchange，提问作者Draxxo97