Javascript jqgrid:Datepicker小部件作为过滤器不使用'；t关闭后触发滤波
在这个例子中，我尝试使用带有过滤器的日期选择器。 一切正常，但当日期选择器关闭时，过滤器不会应用。在关闭日期选择器后，我尝试在enter key事件中触发，但它不起作用（Javascript jqgrid:Datepicker小部件作为过滤器不使用'；t关闭后触发滤波,javascript,jquery,html,jqgrid,datepicker,Javascript,Jquery,Html,Jqgrid,Datepicker,在这个例子中，我尝试使用带有过滤器的日期选择器。 一切正常，但当日期选择器关闭时，过滤器不会应用。在关闭日期选择器后，我尝试在enter key事件中触发，但它不起作用（$（elem）.focus（）.trigger（{type:'keypress'，charCode:13}）；）。唯一触发过滤的是更改比较模式（=，！，…） 这是我的密码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he
$（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>
jqgrid测试
$（函数（）{
变量d=[
{id:“13”，invdate:“2014-08-08T00:00:00”，name:“test1”，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”，note1，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“2”，invdate:“2007-10-02”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“430.00”}，
{id:“4”，invdate:“2007-10-04”，name:“test4”，note4，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“5”，invdate:“2007-10-31”，name:“test5”，note5，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test6”，note6，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“430.00”}，
{id:“7”，invdate:“2007-10-04”，name:“test7”，note7，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“8”，invdate:“2007-10-03”，name:“test8”，note8，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“9”，invdate:“2007-09-01”，name:“test9”，note9，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“TN”，total:“430.00”}，
{id:“10”，invdate:“2007-09-08”，name:“test10”，note10，amount:“500.00”，tax:“30.00”，closed:true，ship_via:“TN”，total:“530.00”}，
{id:“11”，invdate:“2007-09-08”，name:“test11”，note11，amount:“500.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“530.00”}，
{id:“12”，invdate:“2007-09-10”，name:“test12”，note12，amount:“500.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“530.00”}
],
$grid=$（“#列表”），
initDateSearch=函数（elem）{
setTimeout（函数（）{
$（元素）.日期选择器({
日期格式：“年月日”，
自动调整大小：正确，
变化年：是的，
变化月：对，
《秀周刊》：没错，
showButtonPanel：是的，
onClose：函数（selectedDate）{
调试器；
$（elem.focus（）.trigger（{type:'keypress'，charCode:13}）；；
}
});
}, 100);
},
numberTemplate={
格式化程序：“数字”，对齐：“右”，排序类型：“数字”，
editrules:{number:true，required:true}，
搜索选项：{sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”、“nu”、“nn”、“in”、“ni”]}
};
var$grid=$（“#grid”）.jqGrid({
数据类型：“本地”，
数据：d，
宽度：800，
//自动宽度：正确，
shrinkToFit：是的，
多重搜索：对，
ColName:[“客户”、“日期”、“金额”、“税费”、“总额”、“已结清”、“通过发货”、“备注”]，
colModel：[
{name:“name”，align:“center”，可编辑：true，宽度：65，编辑规则：{required:true}，
{
名称：“invdate”，宽度：120，对齐：“中心”，排序类型：“日期”，
格式化程序：“日期”，格式化选项：{newformat:“Y-m-d”}，可编辑：true，
搜索选项：{sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”]，dataInit:initDateSearch}
},
{name:“amount”，宽度：75，可编辑：true，模板：numberTemplate}，
{name:“tax”，宽度：52，可编辑：true，模板：numberTemplate}，
{name:“total”，宽度：60，模板：numberTemplate}，
{
名称：“闭合”，宽度：70，对齐：“中心”，可编辑：真，格式设置：“复选框”，
edittype:“复选框”，editoptions:{value:“是：否”，defaultValue:“是”}，
stype:“选择”，搜索选项：{sopt:[“eq”，“ne”]，值：：：任意；真：是；假：否”}
},
{
名称：“ship_via”，宽度：105，对齐：“center”，可编辑：true，格式设置：“select”，
edittype:“选择”，editoptions:{value:“FE:FedEx；TN:TNT；IN:Intim”，defaultValue:“IN”}，
stype:“选择”，搜索选项：{sopt:[“eq”，“ne”]，值：“：任意；FE:FedEx；TN:TNT；IN:IN”}
},
{name:“note”，宽度：60，可排序：false，可编辑：true，可编辑类型：“textarea”}
],
//sortname:“年龄”，
//巫师：“描述”，
//ignoreCase：是的，
//高度：“自动”，
//页面
onClose: function (selectedDate) {
$grid[0].triggerToolbar();
}