{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 祖国的老花朵 的问题《jqGrid postData.filters is undefined》','https://www.manongdao.com/q-1056730.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a requirement to customize jqGrid. But postData.Filters is undefined. As I am new to jquery and javascript I am unable to find out what exactly is the issue, even after a day of efforts.
I am using the below javascript.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.css" />
<style type="text/css">
html, body {
font-size: 75%;
}
.ui-multiselect-menu {
font-size: 1.2em;
}
.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th {
height: auto;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script src="js/jquery.jqGrid.src.js"></script>
<script src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
$(function () {
'use strict';
var jsonData = {
"Employees": [
{
"Emp ID": 1.0,
"Name": "Anubhav",
"Gender": "Male",
"Department": "DEVELOPMENT",
"Company": "SOPRA",
"Salary": 100000
},
{
"Emp ID": 2.0,
"Name": "Shailesh",
"Gender": "Male",
"Department": "DEVELOPMENT",
"Company": "SOPRA",
"Salary": 10000
},
{
"Emp ID": 3.0,
"Name": "Deepak",
"Gender": "Male",
"Department": "SALES",
"Company": "ROQUETTE",
"Salary": 20000
},
{
"Emp ID": 4.0,
"Name": "Seema",
"Gender": "Female",
"Department": "PURCHASE",
"Company": "ROQUETTE",
"Salary": 25000
}
]},
$grid = $("#list2"),
myDefaultSearch = 'cn',
getColumnIndexByName = function (columnName) {
var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel;
window.alert("Hello");
window.alert(this.p.postData.filters);
var filters = $.parseJSON(this.p.postData.filters);
window.alert("Hello 2");
if (filters && filters.rules !== undefined && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
iCol = getColumnIndexByName.call(this, rule.field);
cmi = cm[iCol];
if (iCol >= 0 &&
((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
&& (rule.op === myDefaultSearch)) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt[0] === rule.op)) {
// make modifications only for the 'contains' operation
parts = rule.data.split(separator);
if (parts.length > 1) {
if (filters.groups === undefined) {
filters.groups = [];
}
group = {
groupOp: 'OR',
groups: [],
rules: []
};
filters.groups.push(group);
for (j = 0, l = parts.length; j < l; j++) {
str = parts[j];
if (str) {
// skip empty '', which exist in case of two separaters of once
group.rules.push({
data: parts[j],
op: rule.op,
field: rule.field
});
}
}
rules.splice(i, 1);
i--; // to skip i++
}
}
}
this.p.postData.filters = JSON.stringify(filters);
}
},
dataInitMultiselect = function (elem) {
setTimeout(function () {
var $elem = $(elem), id = elem.id,
inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
return;
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = 'auto';
}
$elem.multiselect(options);
$elem.siblings('button.ui-multiselect').css({
width: inToolbar ? "98%" : "100%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}, 50);
};
$grid.jqGrid({
datatype: "json",
data: jsonData,
colNames: ["Emp ID", "Name", "Department", "Company", "Salary"],
colModel: [
{ name: "Emp ID", sorttype: 'integer' },
{ name: "Name" },
{
name: "Department", width: 100, align: 'center', formatter: 'select', edittype: 'select', stype: 'select',
editoptions: { value: 'DEVELOPMENT;SALES;PURCHASE', defaultValue: 'DEVELOPMENT', multiple: true },
searchoptions: { sopt:['eq', 'ne'], value: 'DEVELOPMENT;SALES;PURCHASE', attr: { multiple: 'multiple', size: 4 }, dataInit: dataInitMultiselect }
},
{ name: "Company" },
{ name: "Salary", sorttype: 'integer' }
],
cmTemplate: { editable: false },
rowNum: 10,
mtype: "GET",
rowList: [10, 20, 100],
pager: "#pager2",
height: "auto",
viewrecords: true,
gridview: true,
ignoreCase: true,
rownumbers: true,
cellEdit: true,
cellsubmit: "clientArray",
editurl: "clientArray",
sortname: 'Emp ID',
caption: "CDDI Sample Grid",
beforeRequest: function () {
modifySearchingFilter.call(this, ',');
}
});
$grid.jqGrid('filterToolbar', {search:true, searchOperators: true, stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
$grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, search: true }, {}, {}, {}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
});
});
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
I see that you use the code from my old answer.
The error "jqGrid postData.filters is undefined" undefined can be easy fixed by adding the lines
inside of
modifySearchingFilterbefore the linevar filters = $.parseJSON(postData.filters);.Additional important error in your code is the usage of
datatype: "json"instead ofdatatype: "local". The optiondatatype: "json"means that the data fro the grid will be loaded via Ajax request to the URL specified byurlparameter.One more error is the usage of
data: jsonDatainstead ofdata: jsonData.Employees. It's important to understand that the value ofdataparameter have to be an array.One more remark: I strictly recommend you to use no special characters in the
nameproperty ofcolModel(currently you havename: "Emp ID"). The value ofnameproperty will be used asidof some internal elements of the grid, but space will by used by jQuery and by CSS as delimiter and as meta-character (see here for example). So I would recommend you to changename: "Emp ID"toname: "EmpId"for example to have in the future less problems.The fixed demo you will fined here. It uses the following code