基于列的不同值的JQGrid MultiSelect筛选器选项
我使用JQGrid和多重选择过滤器来过滤单个列。目前，我正在使用数据库主值填充过滤器(例如SkillCategory列)。
{
name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select',
searchoptions: {
clearSearch: false,
sopt: ['eq', 'ne'],
dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=skillcat',
buildSelect: createSelectList,
attr: { multiple: 'multiple', size: 4 },
position: {
my: 'left top',
at: 'left bottom'
},
dataInit: dataInitMultiselect
}
},此方法是将所有可用的主列表(用于SkillCategory)填充到过滤器中。我只想显示基于特定列(对于SkillCategory)可用行中的可用筛选值。这应该将“编程”和“数据”显示为SkillCategory筛选器的选项，因为行只包含该列的“编程”和“数据”值。
我发现下面的代码(抱歉忘了链接)
getUniqueNames = function (columnName) {
var texts = $("#listTableSupply").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;
}
buildSearchSelect = function (uniqueNames) {
var values = ":All";
$.each(uniqueNames, function () {
values += ";" + this + ":" + this;
});
return values;
}
setSearchSelect = function (columnName) {
$("#listTableSupply").jqGrid('setColProp', columnName,
{
searchoptions: {
sopt: ['eq', 'ne'],
value: buildSearchSelect(getUniqueNames(columnName)),
attr: { multiple: 'multiple', size: 3 },
dataInit: dataInitMultiselect
}
}
);
}调用setSearchSelect("SkillCategory")
.... caption: 'Supply',
emptyrecords: "No records to view",
loadtext: "Loading...",
refreshtext: "Refresh",
refreshtitle: "Reload Grid",
loadComplete: loadCompleteHandler1,
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
},
beforeRequest: function () //loads the jqgrids state from before save
{
modifySearchingFilter.call(this, ',');
}
}).jqGrid('bindKeys');
$('#listTableSupply').bind('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});
setSearchSelect("SkillCategory");
$('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
cloneToTop: true,
refresh: true, refreshtext: "Refresh", edit: false, add: false, del: false, search: false
}, {}, {}, {}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
}); .....但似乎不起作用。只填充“所有”值。
知道我怎么能做到这一点吗。
Update1：
根据奥列格的建议，下面是为我工作的工作代码。
initializeGridFilterValue = function () {
//jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
setSearchSelect("SkillCategory");
jQuery("#listTableSupply").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("#listTableSupply").jqGrid('setGridHeight', 300);
}并从loadComplete事件中设置它，如下所示：
function loadCompleteHandler1() {
initializeGridFilterValue();
}回答 1
Stack Overflow用户
发布于 2014-11-17 13:01:28
我看到您使用了来自my old answer的代码。关于您的问题:我认为您首先调用了filterToolbar，它创建了过滤器工具栏，然后调用了setSearchSelect，它设置了新的searchoptions.value属性。另一个可能的问题是，在将数据加载到网格中之前调用setSearchSelect 。如果使用带有datatype: "local"参数的data参数，则在创建网格期间将在网格中填充数据。如果使用datatype: "json"，那么首先应该从服务器加载数据，然后在loadComplete中调用setSearchSelect和filterToolbar。例如，如果使用loadonce: true，则可以在loadComplete中测试datatype参数的值。如果值为"json"，则对数据进行初始加载。因此，您应该调用setSearchSelect，然后如果需要调用destroyFilterToolbar，最后调用filterToolbar来创建筛选工具条，选择该工具栏将具有所有所需的值。
https://stackoverflow.com/questions/26972112
复制相似问题
腾讯云开发者
