Панель инструментов фильтра jqGrid показывает селектор оператора поиска только для одного столбца

У меня есть таблица jqGrid со многими столбцами. Поиск в сетке производится с помощью панели инструментов фильтра. Для большинства из них поиск - это простой оператор по умолчанию. Для одного столбца datetime мне нужны разные операторы и селектор datepicker. Я добавил dataInit инициализацию datepicker в searchoptions, необходимые операторы в searchoptions.sopt. Чтобы показать эти операторы, я установил для searchOperators значение true. Так что для этой колонки все в порядке. У меня есть datepicker с всплывающим окном выбора оператора. Но для всех остальных столбцов слева от него отображается значок оператора по умолчанию. Это раздражает, поскольку оператор установлен по умолчанию, и пользователь не может его изменить. Так есть ли возможность скрыть их с помощью jqGrid API? Насколько я мог видеть, я мог скрыть это только с помощью собственного кода:

Мне нужно проверить мою модель столбца и после рендеринга сетки (может быть в loadComplete) для всех столбцов, в которых есть пустые sopt или sopt.length == 0, чтобы удалить селектор оператора. Или добавьте класс CSS, который его скрывает. Не уверен, какое из этих решений лучше (скрыть или удалить), потому что удаление может нарушить некоторую логику, а скрытие может повлиять на расчет ширины. Вот пример того, что я имею в виду на скрипке

function fixSearchOperators()
{
    var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel');
    var gridContainer = $("#grid").parents(".ui-jqgrid");
    var filterToolbar = $("tr.ui-search-toolbar", gridContainer);

    filterToolbar.find("th").each(function()
    {
        var index = $(this).index();
        if(!(columns[index].searchoptions &&
             columns[index].searchoptions.sopt &&
             columns[index].searchoptions.sopt.length>1))
        {
            $(this).find(".ui-search-oper").hide();
        }
    });
}

Есть ли у кого-нибудь идеи получше?


jqgrid jqgrid-asp.net
person Yauhen.F    schedule 17.07.2013    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Я считаю очень хорошей идеей определить видимость операций поиска в каждом столбце. +1 от меня.

Я только предлагаю вам немного изменить критерии выбора столбцов панели инструментов поиска, в которых будут выполняться поисковые операции. Мне кажется более естественным включать в searchoptions какое-то новое свойство. Чтобы можно было написать что-нибудь вроде

searchoptions: {
    searchOperators: true,
    sopt: ["gt", "eq"],
    dataInit: function(elem) {
        $(elem).datepicker();
    }
}

Я думаю, что некоторые столбцы, такие как столбцы с stype: "select", могут все еще иметь sopt (по крайней мере sopt: ["eq"]), но никто не хочет видеть операторы поиска для таких столбцов. В таких случаях было бы очень удобно задавать видимость поисковых операций на уровне столбца.

Демонстрацию модифицированной скрипты можно найти здесь. Я включил в демонстрационный CSS-код исправление (см. ответ и соответствующий отчет об ошибке). Полный код ниже

var dataArr = [
    {id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'},
    {id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'},
    {id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}];

function fixSearchOperators() {
    var $grid = $("#grid"),
        columns = $grid.jqGrid ('getGridParam', 'colModel'),
        filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar");

    filterToolbar.find("th").each(function(index) {
        var $searchOper = $(this).find(".ui-search-oper");
        if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) {
            $searchOper.hide();
        }
    });
}

$("#grid").jqGrid({
    data: dataArr,
    datatype: "local",
    gridview: true,
    height: 'auto',
    hoverrows: false,
    colModel: [
        { name: 'id', width: 60, sorttype: "int"},
        { name: 'name', width: 70},
        { name: 'surname', width: 100},
        { name: 'startdate', sorttype: "date", width: 90,
            searchoptions: {
                searchOperators: true,
                sopt: ['gt', 'eq'],
                dataInit: function(elem) {
                    $(elem).datepicker();
                }
            },
            formatoptions: {
                srcformat:'m/d/Y',
                newformat:'m/d/Y'
            }
        }
    ]
});

$("#grid").jqGrid('filterToolbar', {
    searchOnEnter: false,
    ignoreCase: true,
    searchOperators: true
});
fixSearchOperators();

Он показывает тот же результат, что и молодость:

введите описание изображения здесь

person Oleg    schedule 18.07.2013