Может ли jqgrid поддерживать выпадающие списки в полях фильтра панели инструментов

Question

Я использую jqgrid и фильтр панели инструментов. по умолчанию он просто дает вам текстовое поле для ввода данных. Поддерживает ли он выпадающий список со списком, в котором я могу дать ему список значений, из которых можно выбрать фильтр на них?

Answer 1

В 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 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"});

Это то, что вы хотите?

ОБНОВЛЕНО : Еще одним вариантом может быть использование плагина select2 , который сочетает в себе преимущества раскрывающегося списка и удобный поиск с помощью автозаполнения. См. ответ и этот (см. Демонстрацию) для демонстраций ( этот и этот ) и примеры кода.

ОБНОВЛЕНО 2 : Ответ содержит изменение приведенного выше кода для работы с jqGrid 4.6 / 4.7 или с free jqGrid 4.8 .

Answer 2

У меня была похожая ситуация. Благодаря превосходному примеру Олега выше, это почти решило проблему. Было одно небольшое улучшение, в котором я нуждался. Моя сетка является сеткой 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;
}

Answer 3

Я просто сделал это сам. Это было немного похоже на взлом, но это работает!

1. Создан новый "navButtonAdd" и для "заголовка" добавлен HTML-код для выпадающего списка.
2. Функция onclickButton ничего не содержит.

3. Затем я создал функцию 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"); 
       }; 
   

   Надеюсь, это поможет!

Answer 4

категория - имя столбца.

loadComplete: function () {
    $("#" + TableNames).setColProp('Category', {
        formatter: 'select', edittype: "select",
        editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
    });
},