Question

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

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

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

链接：filament group daterangepicker

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

获得了更新版本

链接：Github filament group daterangepicker jquery 1.8

daterangepicker也可以使用datepicker支持的所有选项，因此转换时不会有太多麻烦。如果您有任何问题，请告诉我，我会看看能否提供帮助。

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

更新：添加代码示例

此代码的重要部分是colModel中的日期。您只需为搜索选项指定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);
                              }
                          }     
            });

Answer 2

我必须做同样的事情，而上面的约瑟夫的答案让我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 }]);
    }

在jqgrid过滤器的单列中添加DatePicker范围

2 个答案: