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

89
7

Ive смог добавить datepicker в панель инструментов фильтра jqgrid с приведенным ниже кодом. Тем не менее, мне интересно, если theres способ сжать двух финалистов в этот единственный столбец 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();
}

спросил(а) 2011-11-18T20:14:00+04:00 8 лет, 10 месяцев назад
1
Решение
89

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


ссылка: группа нитей daterangepicker


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


ссылка: Группа нитей накала Github 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);
}
}
});

ответил(а) 2011-11-22T22:43:00+04:00 8 лет, 10 месяцев назад
57

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

ответил(а) 2014-04-03T18:50:00+04:00 6 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема