Добавить диапазон DatePicker в один столбец фильтра jqgrid - PullRequest
Новая
       27

Добавить диапазон DatePicker в один столбец фильтра jqgrid

4 голосов
/ 18 ноября 2011

Мне удалось добавить средство выбора даты на панель инструментов фильтра 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();
}

Ответы [ 2 ]

4 голосов
/ 22 ноября 2011

Если вы открыты для добавления в плагин, я обнаружил, что работать с палитрой диапазонов из группы филаментов очень просто. Менее чем через час у меня были загружены и установлены 3 файла в мой проект, и работал инструмент выбора диапазона.

ссылка: дата-группа нити накала

Поскольку я использую jquery 1.8 в своем проекте, я получил обновленную версию с

ссылка: Группа нитей Github daterangepicker jquery 1.8

daterangepicker также может использовать все опции, которые поддерживает datepicker, поэтому у вас не должно возникнуть особых проблем при конвертации. Дайте мне знать, если у вас есть вопросы, и я посмотрю, смогу ли я помочь.

Для справки, плагин имеет двойную лицензию с MIT и GPL. Это та же структура лицензии, что и у jqgrid, поэтому я предполагаю, что если вы сможете использовать jqgrid, то этот плагин не должен быть проблемой.

ОБНОВЛЕНИЕ: Пример добавления кода

Важная часть этого кода в colModel для даты. Вы просто указываете функцию dataInit для параметров поиска, а затем добавляете указатель даты. Будьте осторожны с капитализацией. Это дало мне не раз. BeforeSelectRow - это просто некоторая модификация, которую я сделал для того, чтобы мои флажки вдоль стороны вели себя как переключатели. Он не нужен для работы устройства выбора даты. 

$("#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);
                              }
                          }     
            });
1 голос
/ 03 апреля 2014

Я должен был сделать то же самое, и ответ Джозефа выше дал мне 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 }]);
    }
...