在 jqgrid 过滤器的单列中添加 DatePicker 范围
Posted
技术标签:
【中文标题】在 jqgrid 过滤器的单列中添加 DatePicker 范围【英文标题】：Add DatePicker range in single column of jqgrid filter 【发布时间】：2012-01-01 10:35:40 【问题描述】：我已经能够使用下面的代码将日期选择器添加到 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();
【问题讨论】：
我将在下周左右尝试做同样的事情。如果我找到任何东西，我会告诉你的。 【参考方案1】：如果您愿意添加插件，我发现 灯丝组的范围选择器非常易于使用。在不到一个小时的时间里，我下载了 3 个文件并将其安装到我的项目中，并且范围选择器正常工作。
链接：filament group daterangepicker
由于我在我的项目中使用 jquery 1.8，我最终从
获得了更新版本链接：Github filament group daterangepicker jquery 1.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);
);
【讨论】：
您是否能够将这些 daterangepicker 文本框之一放入 jqGrid 过滤器工具栏？ 是的。我在网格上搜索过滤器的地方使用它。当用户单击搜索框时，将显示选择器。如果需要，我可以在星期一发布一些代码，但它非常简单。 是的，请在有时间的时候做。 尝试了此代码，但在 datarangepicker javascript 文件中出现Line 111: Cannot call method 'split' of undefined 错误。有人吗？
请开始您自己的问题，而不是添加 cmets。【参考方案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 范围的主要内容，如果未能解决你的问题，请参考以下文章
jqGrid multiplesearch - 如何为每一行添加和/或列？