Может ли jqgrid поддерживать выпадающие списки в полях фильтра панели инструментов
Я использую jqgrid и фильтр панели инструментов. по умолчанию он просто дает вам текстовое поле для ввода данных. Это поддерживает выпадающий список выбора, где я могу дать ему список значений, чтобы выбрать их фильтр?
4 ответа
В jqGrid есть несколько общих правил для всех типов сортировки.
{
name: 'Category', index: 'Category', width: 200, formatter:'select',
stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}
где categoriesStr определяются как
var categoriesStr = ":All;1:sport;2:science";
Здесь дополнительно к стандартной "1: спорт;2: наука" вставляются значения "Все", которые позволяют не фильтровать столбец. Конечно, вы можете использовать ":" или ": Выбрать..." и так далее.
На демоверсии, подготовленной к ответу, вы можете увидеть близкие результаты.
ОБНОВЛЕНО: я считаю ваш вопрос интересным и сделал демо. Он показывает, как можно построить выпадающие списки, которые можно использовать на панели инструментов поиска или в диалоговом окне расширенного поиска, на основе текста, содержащегося в соответствующем столбце. Для одного столбца я использую дополнительно автозаполнение jQuery UI. Вы можете изменить код, чтобы использовать более различные мощные опции автозаполнения. Вот код этого кода:
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, который сочетает в себе преимущества раскрывающегося списка и удобный поиск по автозаполнению. Смотрите ответ и этот (см. Демо) для демонстраций ( этот и этот) и примеры кода.
ОБНОВЛЕНО 2: Ответ содержит изменение приведенного выше кода для работы с jqGrid 4.6/4.7 или с бесплатной jqGrid 4.8.
У меня была похожая ситуация. Благодаря прекрасному примеру Олега выше, это почти решило проблему. Было одно небольшое улучшение, в котором я нуждался. Моя сетка является сеткой 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;
}
Я просто сделал это сам. Это было немного похоже на взлом, но это работает!
- Создан новый "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"); };Надеюсь это поможет!
Категория - это имя столбца.
loadComplete: function () {
$("#" + TableNames).setColProp('Category', {
formatter: 'select', edittype: "select",
editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
});
},