jqgrid可以支持工具栏filter字段中的下拉菜单
我正在使用jqgrid和工具栏filter。 默认情况下它只是给你一个文本框input数据。 它是否支持下拉selectcombobox，我可以给它一个值的列表来select他们筛选？
jqGrid中所有types的sorting都有一些共同的规则
{ 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”string，它们可以让你不过滤列。 您当然可以使用“：”或“：select…”等等。
在为答案准备的演示中，您可以看到接近的结果。
更新 ：我发现你的问题有趣，并做了演示 。 它显示了如何根据相应列的文本内容构build可用于search工具栏或高级search对话框的选定combobox。 对于一列，我另外使用jQuery UI自动完成 。 您可以修改代码以使用更多不同的自动完成function。 这里是代码的代码：
var mydata = [ {id:"1", Name:"Miroslav Klose", Category:"sport", Subcategory:"football"}, {id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"}, {id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"}, {id:"4", Name:"Blaise Pascal", Category:"science", 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', width:200 }, { 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插件，它结合了下拉和自动完成的舒适search的优点。 看到答案和这个 （演示）演示（ 这个和这一个 ）和代码示例。
更新2 ： 答案包含修改上述代码与jqGrid 4.6 / 4.7或免费的jqGrid 4.8一起使用 。
我也有类似的情况。 感谢Oleg上面的优秀例子，它几乎解决了这个问题。 我需要一点改善。 我的网格是一个约40行，每页10个加载网格。 上面使用的getCol方法只返回当前页面的列值。 但是我想在整个数据集中填充唯一值的filter。 所以这里对函数getUniqueNames稍作修改：
var getUniqueNames = function(columnName) { // Maybe this line could be moved outside the function // If the data is really huge then the entire segregation could // be done in a single loop storing each unique column // in a map of columnNames -> unique values var data = grid.jqGrid('getGridParam', 'data'); var uniqueTexts = [], text, textsMap = {}, i; for (i = 0; i < data.length; i++) { text = data[i][columnName]; 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); } } // Object.keys(textsMap); Does not work with IE8: return uniqueTexts; }
我只是自己做的。 这感觉有点像黑客，但它的工作原理！
- 创build了一个新的“navButtonAdd”，并为“标题”添加了一个下拉列表的html代码。
- onclickButton函数不包含任何内容。
-
然后我创build了一个onchange函数来处理网格重新加载时的值更改。
$('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', { caption: "<select id='gridFilter' onchange='ChangeGridView()'><option>Inbox</option><option>Sent Messages</option></select>", title: "Apply Filter", onClickButton: function () { } }); function ChangeGridView() { var gridViewFilter = $("#gridFilter").val(); $('#myGrid').setGridParam({ datatype: 'json', url: '../../Controller/ActionJSON', postData: { msgFilter: gridViewFilter } }); $('#myGrid').trigger("reloadGrid"); };希望这可以帮助！
类别是列名称。
loadComplete: function () { $("#" + TableNames).setColProp('Category', { formatter: 'select', edittype: "select", editoptions: { value: "0:MALE;1:FEMALE;2:other;" } }); },
