jQuery jqgrid 是否可以支持工具栏过滤字段中的下拉菜单
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5328072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
can jqgrid support dropdowns in the toolbar filter fields
提问by leora
i am using jqgrid and the toolbar filter. by default its just gives you a textbox to enter data into. Does it support a dropdown select combobox where i can give it a list of values to choose from to them filter on ??
我正在使用 jqgrid 和工具栏过滤器。默认情况下,它只是给你一个文本框来输入数据。它是否支持下拉选择组合框,我可以在其中给它一个值列表供它们选择过滤?
回答by Oleg
There are some common rulesfor all types of sorting in jqGrid
jqGrid 中所有类型的排序都有一些通用规则
{
name: 'Category', index: 'Category', width: 200, formatter:'select',
stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}
where categoriesStr
are defined as
其中categoriesStr
定义为
var categoriesStr = ":All;1:sport;2:science";
Here additionally to the standard "1:sport;2:science" values are inserted ":All" string which allow you don't filter the the column. You can of course use ":" or ":Select..." and so on.
除了标准的 "1:sport;2:science" 值之外,这里还插入了 ":All" 字符串,允许您不过滤列。你当然可以使用 ":" 或 ":Select..." 等等。
On the demoprepared for the answeryou can see the close results.
UPDATED: I find your question interesting and made the demo. It shows how one can build the select comboboxes which can be used in the search toolbar or in the advanced searching dialog based on the text contain of the corresponding column. For one column I use additionally jQuery UI autocomplete. You can modify the code to use more different powerful options of the autocomplete. Here is the code of the code:
更新:我发现你的问题很有趣并做了演示。它展示了如何根据相应列的文本包含构建可在搜索工具栏或高级搜索对话框中使用的选择组合框。对于一列,我另外使用jQuery UI autocomplete。您可以修改代码以使用更多不同的自动完成功能强大的选项。这是代码的代码:
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"});
Is this what you want?
这是你想要的吗?
UPDATED: One more option could be the usage of select2plugin which combines the advantages of dropdown and comfortable searching by Autocomplete. See the answerand this one(see the demo) for demos (this oneand this one) and code examples.
更新:另一种选择可能是使用select2插件,它结合了下拉列表和自动完成搜索的优势。有关演示(此一和此一)和代码示例,请参阅答案和此(请参阅演示)。
UPDATED 2: The answercontains the modification of above code to work with jqGrid 4.6/4.7 or with free jqGrid 4.8.
更新 2:答案包含对上述代码的修改,以便与 jqGrid 4.6/4.7 或免费的 jqGrid 4.8 一起使用。
回答by msanjay
I had a similar situation. Thanks to Oleg's excellent example above, it almost solved the problem. There was one slight improvement I needed. My grid is a loadonce grid that had around 40 rows, 10 per page. getCol method used above only returned the current page's column values. But I wanted to populate the filter with unique values across the entire dataset. So here's a slight modification to the function getUniqueNames:
我也有类似的情况。多亏了上面Oleg的优秀例子,它几乎解决了这个问题。我需要一点点改进。我的网格是一个 loadonce 网格,大约有 40 行,每页 10 行。上面使用的 getCol 方法只返回当前页面的列值。但我想用整个数据集中的唯一值填充过滤器。所以这里对函数 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;
}
回答by Losbear
I just did this myself. It felt a little bit like a hack, but it works!
我只是自己做的。感觉有点像黑客,但它有效!
- Created a new "navButtonAdd" and for the "caption", added html code for a dropdown.
- The onclickButton function contains nothing.
Then I created an onchange function to handle the grid's reload when it's value changed.
$('#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"); };
Hope this helps!
- 创建了一个新的“navButtonAdd”,并为“标题”添加了下拉列表的 html 代码。
- onclickButton 函数不包含任何内容。
然后我创建了一个 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"); };
希望这可以帮助!
回答by Narendra
categoryis column name.
类别是列名。
loadComplete: function () {
$("#" + TableNames).setColProp('Category', {
formatter: 'select', edittype: "select",
editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
});
},