jqGrid过滤器工具栏仅针对单列显示搜索运算符选择器 [英] jqGrid filter toolbar show search operator selector just for single column

问题描述

我有许多列的jqGrid表.使用筛选器工具栏在网格中进行搜索.对于大多数搜索而言，它们只是简单的默认运算符.对于一个datetime列，我想要不同类型的运算符和datepicker选择器. 我已经将dataInit datepicker初始化添加到了searchoptions，并将必需的运算符添加到了searchoptions.sopt.为了显示此运算符，我将searchOperators设置为true.因此，对于本专栏，一切正常.我有带操作符选择器弹出框的datepicker.但是，对于所有其他列，默认操作符图标显示在其左侧.这很烦人，因为操作员是默认操作，用户无法更改它.那么是否有可能使用jqGrid API隐藏它们?据我所知，我只能使用自定义代码隐藏它:

I have jqGrid table with many columns. Searching in grid is made using filter toolbar. For most of them search is just simple default operator. For one datetime column I want different kind of operators and datepicker selector. I have added dataInit datepicker initialization to searchoptions, necessary operators to searchoptions.sopt. To show this operators I have set searchOperators to true. So for this column all is ok. I have datepicker with operator selector popup. But for all other columns default operator icon is shown on the left of it. It is annoying as operator is default and user couldn't change it. So is there is some possibility to hide them using jqGrid API? As far as I could see I could hide this only using my custom code:

我需要检查我的列模型，并在渲染网格(可能在loadComplete中)之后，清除所有具有空sopt或sopt.length == 0的列，以删除运算符选择器.或添加隐藏它的CSS类.不确定使用哪种解决方案更好(隐藏或删除)，因为删除可能会破坏某些逻辑，并且隐藏可能会影响宽度计算.这是我在小提琴

I need to check my column model and after rendering of grid (may be in loadComplete) for all columns that have empty sopt or sopt.length == 0 to remove operator selector. Or add CSS class that hide it. Not sure which of these solution is better (hide or remove) because removing could broke some logic, and hiding could affect width calculation. Here is sample of what I mean on fiddle

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();
        }
    });
}

有人有更好的主意吗?

推荐答案

我发现在每列中定义搜索操作可见性的想法非常好.向我+1.

I find the idea to define visibility of searching operations in every column very good idea. +1 from me.

我只建议您稍微改变一些标准，以选择搜索工具栏的哪些列将执行搜索操作.在我看来，在searchoptions内包含一些新属性更为自然.这样你就可以写类似

I would only suggest you to change a little the criteria for choosing which columns of searching toolbar will get the searching operations. It seems to me more native to include some new property inside of searchoptions. So that you can write something like

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

我认为某些列，例如带有stype: "select"的列，可能仍需要具有sopt(至少是sopt: ["eq"])，但是却不想看到此类列的搜索运算符.在这种情况下，在列级别指定搜索操作的可见性将非常实用.

I think that some columns, like the columns with stype: "select", could still need to have sopt (at least sopt: ["eq"]), but one don't want to see search operators for such columns. Specifying of visibility of searching operations on the column level would be very practical in such cases.

您可以在此处找到经过修改的小提琴演示.我在修复程序中包含了演示CSS(请参见

The modified fiddle demo you can find here. I included in the demo CSS from the fix (see the answer and the corresponding bug report). The full code is below

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();

它显示出与青年时期相同的结果:

It displays the same result like youth:

这篇关于jqGrid过滤器工具栏仅针对单列显示搜索运算符选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！