我尝试在此示例中使用带有过滤器based的datepicker。
一切正常，但是当datepicker关闭时，不会应用过滤器。我在关闭datepicker后尝试触发enter键事件但它不起作用（$(elem).focus().trigger({ type: 'keypress', charCode: 13 });）。触发过滤的唯一方法是更改比较模式（==，！，..）。
这是我的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqgrid tests</title>
<link href="js/jquery-ui-1.11.0/jquery-ui.min.css" rel="stylesheet" />
<link href="js/multiselect-master/css/ui.multiselect.css" rel="stylesheet" />
<link href="js/jquery.jqGrid-4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script src="js/jquery.jqGrid-4.6.0/js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.11.0/jquery-ui.min.js"></script>
<script src="js/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="js/jquery.jqGrid-4.6.0/js/jquery.jqGrid.min.js"></script>
<script>
$(function () {
var d = [
{ id: "13", invdate: "2014-08-08T00:00:00", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "1", invdate: "2012-09-16T00:00:00", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "yy-mm-dd",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onClose: function (selectedDate) {
debugger;
$(elem).focus().trigger({ type: 'keypress', charCode: 13 });;
}
});
}, 100);
},
numberTemplate = {
formatter: "number", align: "right", sorttype: "number",
editrules: { number: true, required: true },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
};
var $grid = $("#grid").jqGrid({
datatype: "local",
data: d,
width: 800,
//autowidth: true,
shrinkToFit: true,
multipleSearch: true,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: { required: true } },
{
name: "invdate", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "amount", width: 75, editable: true, template: numberTemplate },
{ name: "tax", width: 52, editable: true, template: numberTemplate },
{ name: "total", width: 60, template: numberTemplate },
{
name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" }
},
{
name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" }
},
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" }
],
//sortname: "age",
//sortorder: "desc",
//ignoreCase: true,
//height: "auto",
//pager: '#pager',
//rowNum: 10
rowNum: 20,
rowList: [5, 10, 20],
multiselect: true,
pager: '#pager',
gridview: true,
rownumbers: false,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
height: '100%',
caption: 'Demonstrate how to use the columnChooser'
})
.jqGrid('navGrid', '#pager', {
refreshstate: 'current',
add: false,
edit: false,
del: false,
search: true,
refresh: false
})
.jqGrid("filterToolbar", { defaultSearch: "cn", searchOperators : true, searchOnEnter: false, stringResult: "true" })
});
</script>
</head>
<body>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
答案 0 :(得分：2)
JQGRID.triggerToolbar();可以解决问题。
完整onClose代码：
onClose: function (selectedDate) {
$grid[0].triggerToolbar();
}
DOKU：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching#using_the_additional_methods
使用其他方法
上面列出的方法应该这样使用：... var sgrid = $（ “＃grid_id”）[0]; sgrid.triggerToolbar（）;这将执行搜索 动态。