JQGrid Multiselect过滤器-无法过滤多个选项 [英] JQGrid Multiselect filter-not able to filter multiple options
问题描述
很抱歉再次打扰您. 我面临着JQGrid Multiselect过滤器的非常关键的问题.每当我为一个特定的列选择多个过滤器选项时，它都会返回空结果.请参见下面的屏幕截图.而且我正在附加代码. 在示例中，如果我为"COE"列分别选择"SPM"或"T-CRM"作为搜索过滤器，则其给出结果，但是如果我同时选择"SPM"和"T-CRM"，则其不返回任何值./p>
*以前它按预期运行，但是从那天起，我添加了JQGrid MultiSelect过滤器选项值，该值基于列的不同
我设法弄清楚了问题所在.
我在网格构建中缺少以下代码: Sorry to bother you again.
I am facing very critical issue with JQGrid Multiselect filter. When ever I am selecting multiple filter options for a particular column, its returning empty result. See below screenshots. And also I am attaching codes.
In the example if I select "SPM" or "T-CRM" individually for "COE" column as search filter then its giving results but if I select both "SPM" and "T-CRM" then its not returning any value. *Previously it was working as expected but from that day when I have added JQGrid MultiSelect filter option value populate based on column's distinct value, its not working. Please help me to overcome from this issue.
I managed to figured out the issue.
I was missing below code from the grid construction:
这篇关于JQGrid Multiselect过滤器-无法过滤多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！beforeRequest: function () {
modifySearchingFilter.call(this, ",");
}
<script type="text/javascript">
createSelectList = function (data) {
selectValue = jQuery.parseJSON(data);
var s = '<select>';
if (selectValue && selectValue.length) {
for (var i = 0, l = selectValue.length; i < l; i++) {
s += '<option value="' + selectValue[i].Key + '">' + selectValue[i].Value + '</option>';
}
}
return s + "</select>";
}
getUniqueNames = function (columnName, grid) {
var mydata = grid.jqGrid("getGridParam", "data");
var texts, uniqueTexts = [], textsLength, text, textsMap = {}, i;
switch (columnName) {
case "AccountName":
texts = $.map(mydata, function (item) { return item.AccountName; });
textsLength = texts.length;
break;
case "OpportunityName":
texts = $.map(mydata, function (item) { return item.OpportunityName; });
textsLength = texts.length;
break;
case "Account":
texts = $.map(mydata, function (item) { return item.Account; });
textsLength = texts.length;
break;
case "COE":
texts = $.map(mydata, function (item) { return item.COE; });
textsLength = texts.length;
break;
case "DemandType":
texts = $.map(mydata, function (item) { return item.DemandType; });
textsLength = texts.length;
break;
case "Location":
texts = $.map(mydata, function (item) { return item.Location; });
textsLength = texts.length;
break;
case "Designation":
texts = $.map(mydata, function (item) { return item.Designation; });
textsLength = texts.length;
break;
case "Experience":
texts = $.map(mydata, function (item) { return item.Experience; });
textsLength = texts.length;
break;
case "ExpectedRole":
texts = $.map(mydata, function (item) { return item.ExpectedRole; });
textsLength = texts.length;
break;
case "SkillCategory":
texts = $.map(mydata, function (item) { return item.SkillCategory; });
textsLength = texts.length;
break;
case "PrimarySkill":
texts = $.map(mydata, function (item) { return item.PrimarySkill; });
textsLength = texts.length;
break;
case "SecondarySkill":
texts = $.map(mydata, function (item) { return item.SecondarySkill; });
textsLength = texts.length;
break;
case "OtherSkill":
texts = $.map(mydata, function (item) { return item.OtherSkill; });
textsLength = texts.length;
break;
case "RequiredDate":
texts = $.map(mydata, function (item) { return item.RequiredDate; });
textsLength = texts.length;
break;
case "EndDate":
texts = $.map(mydata, function (item) { return item.EndDate; });
textsLength = texts.length;
break;
case "CriticalFlag":
texts = $.map(mydata, function (item) { return item.CriticalFlag; });
textsLength = texts.length;
break;
case "HiringSO":
texts = $.map(mydata, function (item) { return item.HiringSO; });
textsLength = texts.length;
break;
case "HiringSOId":
texts = $.map(mydata, function (item) { return item.HiringSOId; });
textsLength = texts.length;
break;
case "ConfidenceFactor":
texts = $.map(mydata, function (item) { return item.ConfidenceFactor; });
textsLength = texts.length;
break;
case "AccountPOC":
texts = $.map(mydata, function (item) { return item.AccountPOC; });
textsLength = texts.length;
break;
case "Type":
texts = $.map(mydata, function (item) { return item.Type; });
textsLength = texts.length;
break;
case "EmpName":
texts = $.map(mydata, function (item) { return item.EmpName; });
textsLength = texts.length;
break;
case "AvailabilityDate":
texts = $.map(mydata, function (item) { return item.AvailabilityDate; });
textsLength = texts.length;
break;
case "CurrentRole":
texts = $.map(mydata, function (item) { return item.CurrentRole; });
textsLength = texts.length;
break;
case "VisaStatus":
texts = $.map(mydata, function (item) { return item.VisaStatus; });
textsLength = texts.length;
break;
case "Country":
texts = $.map(mydata, function (item) { return item.Country; });
textsLength = texts.length;
break;
case "ProbablePercentage":
texts = $.map(mydata, function (item) { return item.ProbablePercentage; });
textsLength = texts.length;
break;
//Assignment
case "AssignmentId":
texts = $.map(mydata, function (item) { return item.AssignmentId; });
textsLength = texts.length;
break;
case "SupplyId":
texts = $.map(mydata, function (item) { return item.SupplyId; });
textsLength = texts.length;
break;
case "DemandId":
texts = $.map(mydata, function (item) { return item.DemandId; });
textsLength = texts.length;
break;
case "Status":
texts = $.map(mydata, function (item) { return item.Status; });
textsLength = texts.length;
break;
case "ApproverId":
texts = $.map(mydata, function (item) { return item.ApproverId; });
textsLength = texts.length;
break;
case "ApprovalDate":
texts = $.map(mydata, function (item) { return item.ApprovalDate; });
textsLength = texts.length;
break;
case "CreatedBy":
texts = $.map(mydata, function (item) { return item.CreatedBy; });
textsLength = texts.length;
break;
case "CreatedDate":
texts = $.map(mydata, function (item) { return item.CreatedDate; });
textsLength = texts.length;
break;
case "Comments":
texts = $.map(mydata, function (item) { return item.Comments; });
textsLength = texts.length;
break;
case "EmpId":
texts = $.map(mydata, function (item) { return item.EmpId; });
textsLength = texts.length;
break;
case "AvailabilityMonth":
texts = $.map(mydata, function (item) { return item.AvailabilityMonth; });
textsLength = texts.length;
break;
}
// var texts = grid.jqGrid('getCol', columnName), uniqueTexts = [],
// textsLength = texts.length, text, textsMap = {}, i;
for (i = 0; i < textsLength; i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts.sort();
}
buildSearchSelect = function (uniqueNames) {
var values = "";
$.each(uniqueNames, function () {
values += this + ":" + this + ";";
});
return values.substring(0, values.length - 1);
}
setSearchSelect = function (columnName, grid) {
grid.jqGrid('setColProp', columnName,
{
searchoptions: {
clearSearch: false,
sopt: ['eq', 'ne'],
value: buildSearchSelect(getUniqueNames(columnName, grid)),
attr: { multiple: 'multiple', size: 3 },
dataInit: dataInitMultiselect
}
}
);
}
function loadCompleteHandler() {
initializeGridFilterValueDem();
}
initializeGridFilterValueDem = function () {
setSearchSelect("DemandId", jQuery("#listTable"));
setSearchSelect("AccountName", jQuery("#listTable"));
setSearchSelect("AccountPOC", jQuery("#listTable"));
setSearchSelect("COE", jQuery("#listTable"));
setSearchSelect("DemandType", jQuery("#listTable"));
setSearchSelect("Location", jQuery("#listTable"));
setSearchSelect("OpportunityName", jQuery("#listTable"));
setSearchSelect("Designation", jQuery("#listTable"));
setSearchSelect("Experience", jQuery("#listTable"));
setSearchSelect("ExpectedRole", jQuery("#listTable"));
setSearchSelect("SkillCategory", jQuery("#listTable"));
setSearchSelect("PrimarySkill", jQuery("#listTable"));
setSearchSelect("SecondarySkill", jQuery("#listTable"));
setSearchSelect("OtherSkill", jQuery("#listTable"));
setSearchSelect("RequiredDate", jQuery("#listTable"));
setSearchSelect("EndDate", jQuery("#listTable"));
setSearchSelect("ProbablePercentage", jQuery("#listTable"));
setSearchSelect("CriticalFlag", jQuery("#listTable"));
setSearchSelect("ConfidenceFactor", jQuery("#listTable"));
setSearchSelect("HiringSO", jQuery("#listTable"));
setSearchSelect("HiringSOId", jQuery("#listTable"));
jQuery("#listTable").jqGrid("filterToolbar", {
stringResult: true,
searchOnEnter: true,
defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
this.selected = false; // unselect all options
});
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
jQuery("#listTable").jqGrid('setGridHeight', 300);
}
</script>
<script type="text/javascript">
jQuery(function () {
$grid = $("#listTable"),
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,
filters = $.parseJSON(this.p.postData.filters);
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.multiselect(options).multiselectfilter({ placeholder: '' });
$elem.siblings('button.ui-multiselect').css({
width: inToolbar ? "98%" : "100%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}, 50);
};
jQuery("#listTable").jqGrid({
url: 'HttpHandler/DemandHandler.ashx',
ajaxSelectOptions: { cache: false },
postData: { ActionPage: 'TransportType', Action: 'Fill', AssignStatus: 'U' },
datatype: 'json',
mtype: 'GET',
colNames: ['DemandId', 'Account', 'POC', 'COE', 'Type', 'Location', 'OpportunityName', 'Designation', 'Experience', 'ExpectedRole', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'RequiredDate', 'EndDate', 'Probable %', 'CriticalFlag', 'AssignedFlag', 'ConfidenceFactor', 'HiringSO', 'SOId', 'Comments', "# of Positions"],
colModel: [
.........
{
name: 'COE', index: 'COE', width: '100%', stype: 'select', sortable: true, resizable: true, formoptions: { rowpos: 2, colpos: 1, elmsuffix: "(<span class='mystar' style='color:red'>*</span>)" }, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
style: "width: 150px",
dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=coe',
buildSelect: createSelectList
}
},
.......
],
width: '1785',
autowidth: false,
height: '500',
loadonce: true,
pager: '#pager',
gridview: true,
rowNum: 15,
rowList: [15, 30, 45],
rowTotal: 5000,
sortorder: 'desc',
sortname: 'DemandId',
viewrecords: true,
rownumbers: true,
toppager: true,
caption: 'Latest Demands',
emptyrecords: "No records to view",
loadtext: "Loading...",
refreshtext: "Refresh",
refreshtitle: "Reload Grid",
loadComplete: loadCompleteHandler,
}).jqGrid('bindKeys');
$('#listTable').bind('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});
...
</script>
.....
<body>
<div style="width: 1185px; overflow: auto;">
<table id="listTable">
<tbody>
<tr>
<td />
</tr>
</tbody>
</table>
<div id="pager">
</div>
</div>
</body>
beforeRequest: function () {
modifySearchingFilter.call(this, ",");
}
