我已經能夠一個datepicker加入到與下面的代碼jqGrid的的過濾器工具欄上的單個列。但是，我想知道是否有辦法將兩個日期選擇器擠入此單一DateCreated列中，以指定範圍（From，To）。有任何想法嗎？添加DatePicker的範圍內的jqGrid過濾
function loadGrid() {
$(tableID).jqGrid({
…
colModel: [
…
{ name: 'DateCreated', index: 'DateCreated', width: 125, searchoptions:{dataInit:datePick, att:{title:'Select Date'}} },
…
})
…
}
datePick = function(elem) {
$(elem).datepicker();
}
如果您打算在插件中添加，我發現燈絲組中的範圍選擇器非常易於使用。在不到一個小時的時間裏，我將3個文件下載並安裝到我的項目中，並且範圍選擇器正在工作。
鏈接：filament group daterangepicker
作爲在我使用jQuery 1.8在我的項目，我結束了從
獲得一個更新版本鏈接：Github filament group daterangepicker jquery 1.8
daterangepicker也可以採取一切的datepicker支持的選項，所以你不應該有很多麻煩轉換。如果您有問題，請告訴我，我會看看我能否提供幫助。
作爲參考，該插件是雙重許可與MIT和GPL。這是與jqgrid相同的許可證結構，所以我假設你能夠使用jqgrid，比這個插件不應該成爲問題。
UPDATE：添加代碼示例
此代碼的重要部分是在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);
}
}
});
我不得不做同樣的事情，約瑟夫的回答讓我有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 }]);
}
我會在下週左右嘗試做同樣的事情。如果我找到任何我會讓你知道的。 – Joseph