1

我从服务器加载一次数据，并在高级搜索和工具栏搜索中本地过滤数据。有一个日期时间列，我应该在其上过滤特定日期，如下所示：

(2013/01/01 --to--> 2013/01/05)

我将搜索与应用于其他列的其他过滤器一起应用。

我正在使用以下版本：

 jQuery: 1.9.1
 jQuery-UI: 1.10.0
 jQGrid: 4.4.4 
 dateRangePicker: http://www.filamentgroup.com/examples/daterangepicker

这是我的代码：

    var grid;

    var filters = { groupOp: "AND", rules: [] };

    var toolbarSearchOpts = {
        defaultSearch: "cn",
        multipleSearch: true,
        multipleGroup: false,

        stringResult: true,
        closeOnEscape: true,
        closeAfterSearch: true,
        closeAfterReset: true,
        searchOnEnter: false,

        ignoreCase: true
    };

    $(function () {
        grid = $("#Grid");
        grid.jqGrid({
            url: 'TestHandler.ashx',
            datatype: 'json',
            autowidth: false,
            shrinkToFit: true,
            width: 600,
            height: 'auto',
            colNames: ['ID', 'Created Date'],
            colModel: [
                        { name: 'ID', width: '50%', index: 'ID', key: true, sortable: true, sorttype: "int", searchtype: "integer", searchrules: { "required": true, "number": true, "maxValue": 2000 }, searchoptions: { sopt: ['cn', 'eq', 'ne', 'gt', 'lt', 'ge', 'le', 'bw']} },
                        { name: 'CreatedOn', width: '50%', index: 'CreatedOn', align: 'center', sortable: true, searchtype: "date", datefmt: "Y/m/d h:i",
                            /*searchrules: { custom: true, custom_func: searchRange }, */
                            searchoptions: {
                                sopt: ['cn']
                            , dataInit: function (el) { $(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick }); }
                            , beforeSearch: function () {
                                console.log('beforeSearch at ' + ' ' + (new Date()).toLocaleTimeString());
                            }
                            , attr: { title: "Select Date" }
                            }
                        }
                    ],
            rowNum: 500,
            rownumbers: true,
            rowList: [50, 100, 200, 500],
            pager: '#GridPager',
            toppager: true,
            gridview: true,
            viewrecords: true,
            sortname: 'ID',
            sortorder: 'desc',

            loadonce: true,
            cache: true,
            multiselect: true,
            repeatitems: false,

            loadComplete: function () {
                grid.jqGrid('navGrid', '#GridPager', { view: false, add: false, edit: false, del: false, cloneToTop: true }, 
                            {}, // settings for edit
                            {}, // settings for add
                            {},  //settings for delete
                            {multipleSearch: true, multipleGroup: false, stringResult: true, defaultSearch: "cn", ignoreCase: true}, // enable the advanced searching
                            {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
                            );
                grid.jqGrid('filterToolbar', toolbarSearchOpts);
            },
            caption: 'Test'
        });

    });

    datePick = function () {
        grid[0].triggerToolbar();
        grid.trigger('reloadGrid', [{ page: 1}]);
    }

    searchRange = function (value, columnName) {
        //Value seems to be null here on using cust search. 
        //How to get the applied search rules and modify the same??
        //For date range
        filters.rules.push({ field: "CreatedOn", op: "ge", data: "2013/02/01" });
        filters.rules.push({ field: "CreatedOn", op: "le", data: "2013/02/24" });
        // for specific dates
        //filters.rules.push({ field: "CreatedOn", op: "cn", data: "2013/02/24" });

        // add filters applied for other columns here??
        return filters.rules;
    }
4

0 回答 0