asp.net-mvc - 在 jqgrid 过滤器的单列中添加 DatePicker 范围

Question

我已经能够使用以下代码将日期选择器添加到 jqgrid 的过滤器工具栏中。但是，我想知道是否有办法将两个日期选择器压缩到这个单个 DateCreated 列中，以便指定范围(从，到)。有任何想法吗？

function loadGrid() {
    $(tableID).jqGrid({
    …
    colModel: [
    …
    { name: 'DateCreated', index: 'DateCreated', width: 125, searchoptions:{dataInit:datePick, att:{title:'Select Date'}} },
    …
    })
…
}

datePick = function(elem) {
    $(elem).datepicker();
}

Answer 1

如果您愿意添加插件，我发现 filament group 的范围选择器非常易于使用。在不到一个小时的时间里，我将 3 个文件下载并安装到我的项目中，并且范围选择器工作正常。

链接:filament group daterangepicker

由于我在我的项目中使用 jquery 1.8，我最终从

链接:Github filament group daterangepicker jquery 1.8

daterangepicker 还能够采用 datepicker 支持的所有选项，因此您在转换时应该不会遇到太多麻烦。如果您有任何问题，请告诉我，我会看看是否可以提供帮助。

作为引用，该插件已获得 MIT 和 GPL 双重许可。这与 jqgrid 的许可结构相同，所以我假设如果您能够使用 jqgrid，那么这个插件应该没有问题。

更新:添加代码示例

这段代码的重要部分在日期的 colModel 中。您只需为搜索选项指定一个 dataInit 函数，然后添加日期范围选择器。小心大小写。这让我不止一次。 beforeSelectRow 只是我所做的一些修改，目的是使我的复选框在侧面表现得像一个单选按钮。 daterangepicker 不需要它来工作。

$("#myGrid").jqGrid(
            {
                url:url,
                datatype: "json",
                colNames:['Version','Date'],
                colModel:[ 
                          {name:'version', search:true, stype:'text'},
                          {name:'date', search:true,stype:"text",searchoptions:{dataInit:function(el){
                              $(el).daterangepicker({dateFormat:'yy/mm/dd'});
                            } 
                          }}  
                          ],                                  
                          toolbarfilter: true,
                          sortname: 'version',
                          sortorder: "desc", 
                          pager: jQuery('#myPager'),
                          viewrecords: true,
                          gridview: true,
                          multiselect: true,
                          beforeSelectRow: function(rowId)
                          {
                              var selectedIds = jQuery('#myGrid').jqGrid().getGridParam("selarrrow");
                              jQuery("#myGrid").jqGrid().resetSelection();
                              if(selectedIds)
                              {
                                  var id = selectedIds[0]
                                  if(id != rowId)
                                  {
                                      jQuery("#myGrid").jqGrid().setSelection(rowId, false);
                                  }
                              }
                              else
                              {
                                  jQuery("#myGrid").jqGrid().setSelection(rowId, false);
                              }
                          }     
            });