Asp.net mvc 在jqgrid筛选器的单列中添加日期选择器范围

我已经能够使用下面的代码将日期选择器添加到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();
}

---

如果你愿意加入一个插件，我发现灯丝组的范围选择器非常容易使用。在不到一个小时的时间里，我下载了3个文件并安装到我的项目中，范围选择器开始工作

链接：

由于我在我的项目中使用了jQuery1.8，我最终从中获得了一个更新版本

链接：

daterangepicker还能够接受datepicker支持的所有选项，因此您在转换时应该不会遇到太多问题。如果你有问题，请告诉我，我会看看是否能帮上忙

作为参考，该插件是MIT和GPL的双重许可。这与jqgrid的许可证结构相同，因此我假设如果您能够使用jqgrid，那么这个插件应该不会有问题

更新：添加代码示例

这段代码的重要部分在colModel for date中。只需为搜索选项指定dataInit函数，然后添加daterangepicker。小心资本化。这不止一次地让我感动。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);
                              }
                          }     
            });

---

我必须做同样的事情，约瑟夫的回答让我有了90%的成功率。所以，大部分的功劳都归功于他。我不得不修改一些东西使其工作，因为灯丝日期范围选择器允许单个日期（今天选项、特定日期选项等）。我还必须添加一些代码，在您选择日期后触发搜索。这是我的更新…我需要添加的内容主要在beginRequest函数中：

$(document).ready(function() {
        var grid = jQuery('#list').jqGrid({
            url: '/myajaxurl',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Reference #', 'CreatedOn', 'Product', 'Model Number', 'Quantity', 'Transaction Type', 'Created By'],
            colModel: [
                { name: 'InventoryTransactionLogId', index: 'InventoryTransactionLogId', align: 'center', sortable: true, search: false },
                {
                    name: 'CreatedOn',
                    search: true,
                    stype: 'text',
                    align: 'center',
                    formatter: 'date',
                    formatoptions: { newformat: 'm-d-y  H:i' },
                    sortable: true,
                    searchoptions: {
                        dataInit: function(el) {
                            $(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick });
                        }
                    }
                },
                { name: 'ProductName', index: 'ProductName', align: 'center', sortable: true, search: false },
                { name: 'ModelNo', index: 'ModelNo', align: 'center', sortable: true, search: true },
                { name: 'Quantity', index: 'Quantity', align: 'center', sortable: true, search: false },
                { name: 'Description', index: 'Description', align: 'center', sortable: true, search: false },
                { name: 'UserName', index: 'UserName', align: 'center', sortable: true, search: false }
            ],
            loadtext: "Retrieving Inventory Transaction Log...",
            rowNum: 50,
            rowList: [25, 50, 100],
            sortname: 'InventoryTransactionLogId',
            sortorder: 'asc',
            pager: '#pager',
            ignoreCase: true,
            viewrecords: true,
            height: 450,
            autowidth: true,
            scrollOffset: 45,
            caption: 'Inventory Transaction Log',
            emptyrecords: "No records",
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                cell: 'cell',
                id: 'InventoryTransactionLogId',
                userdata: 'userdata'
            },
            beforeRequest: function () {
                var theGrid = jQuery("#list");
                var postData = theGrid.jqGrid('getGridParam', 'postData');
                if (postData != undefined && postData.filters != undefined) {
                    postData.filters = jQuery.jgrid.parse(postData.filters);
                    //Remove if current field exists
                    postData.filters.rules = jQuery.grep(postData.filters.rules, function(value) {
                        if (value.field != 'CreatedOn')
                            return value;
                    });

                    // Parse the range picker field into start/end date
                    var dateRangeString = $('#gs_CreatedOn').val();

                    if (dateRangeString.length > 0) {
                        var dateRange = dateRangeString.split(' - ');

                        if (dateRange.length == 1) {
                            startDate = dateRange[0] + ' 00:00:00';
                            endDate = dateRange[0] + ' 23:59:59.999';
                        } else {
                            startDate = dateRange[0] + ' 00:00:00';
                            endDate = dateRange[1] + ' 23:59:59.999';
                        }

                        var startDateFilter = { "field": "CreatedOn", "op": "ge", "data": startDate };
                        var endDateFilter = { "field": "CreatedOn", "op": "le", "data": endDate };

                        // Add new filters
                        postData.filters.rules.push(startDateFilter);
                        postData.filters.rules.push(endDateFilter);
                    }
                } else {
                    jQuery.extend(postData, {

                    });

                }

                if (postData != undefined && postData.filters != undefined) {
                    postData.filters = JSON.stringify(postData.filters);
                    postData._search = true;
                }
                return [true, ''];
            }
        });

        $('.date').datepicker();
        grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "bw" });
        grid.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false });

    });

    datePick = function() {
        var grid = $("#list");

        $("#list")[0].triggerToolbar();
        $("#list").trigger("reloadGrid", [{ page: 1 }]);
    }

---

我会在下周左右做同样的事情。如果我发现了什么，我会告诉你的。你能将其中一个daterangepicker文本框放入jqGrid过滤器工具栏吗？是的。我在搜索过滤器位于网格上的地方使用它。当用户单击搜索框时，将显示选择器。如果需要，我可以在周一发布一些代码，但非常简单。是的，请在有时间的时候发布。尝试了此代码，但得到了第111行：无法调用datarangepicker javascript文件中未定义的错误的方法“split”。有人吗？请开始你自己的问题，而不是添加评论。