我使用jqgrid和工具栏过滤器。默认情况下它只是给你一个文本框输入数据。它支持一个下拉选择组合框，我可以给它一个值的列表选择从他们过滤？
解决方法
对于jqGrid中的所有类型的排序，有一些
common rules
{
name: 'Category',index: 'Category',width: 200,formatter:'select',stype: 'select',searchoptions:{ sopt:['eq'],value: categoriesStr }
}
其中categoriesStr定义为
var categoriesStr = ":All;1:sport;2:science";
这里除了标准“1：sport; 2：science”之外，还插入“：All”字符串，这样就不会过滤列。你当然可以使用“：”或“：选择…”等。
在the demo准备the answer你可以看到接近的结果。
UPDATED：我发现你的问题很有趣，并做了the demo.它显示了如何构建选择组合框，可以在搜索工具栏或在高级搜索对话框中使用基于相应列的文本包含。对于一列，我还使用jQuery UI autocomplete.您可以修改代码以使用更多不同的自动完成功能强大的选项。这里是代码的代码：
var mydata = [
{id:"1",Name:"Miroslav Klose",Category:"sport",Subcategory:"football"},{id:"2",Name:"Michael Schumacher",Subcategory:"formula 1"},{id:"3",Name:"Albert Einstein",Category:"science",Subcategory:"physics"},{id:"4",Name:"Blaise Pascal",Subcategory:"mathematics"}
],grid = $("#list"),getUniqueNames = function(columnName) {
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;
},buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames,function() {
values += ";" + this + ":" + this;
});
return values;
},setSearchSelect = function(columnName) {
grid.jqGrid('setColProp',columnName,{
stype: 'select',searchoptions: {
value:buildSearchSelect(getUniqueNames(columnName)),sopt:['eq']
}
}
);
};
grid.jqGrid({
data: mydata,datatype: 'local',colModel: [
{ name:'Name',index:'Name',width:200 },{ name:'Category',index:'Category',{ name:'Subcategory',index:'Subcategory',width:200 }
],sortname: 'Name',viewrecords: true,rownumbers: true,sortorder: "desc",ignoreCase: true,pager: '#pager',height: "auto",caption: "How to use filterToolbar better locally"
}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false});
setSearchSelect('Category');
setSearchSelect('Subcategory');
grid.jqGrid('setColProp','Name',{
searchoptions: {
sopt:['cn'],dataInit: function(elem) {
$(elem).autocomplete({
source:getUniqueNames('Name'),delay:0,minLength:0
});
}
}
});
grid.jqGrid('filterToolbar',{stringResult:true,searchOnEnter:true,defaultSearch:"cn"});
这是你想要的吗？
更新：另一个选项可能是使用select2插件，结合了下拉和自动完成的舒适搜索的优势。有关演示(this one和this one)和代码示例，请参阅the answer和this one(参见演示)。
UPDATED 2：The answer包含上述代码的修改与jqGrid 4.6 / 4.7或与free jqGrid 4.8一起使用。
