jqGrid 过滤器工具栏显示仅针对单列的搜索运算符选择器

Question

我有很多列的 jqGrid 表。在网格中搜索是使用过滤器工具栏进行的。对于他们中的大多数人来说，搜索只是简单的默认操作符。对于一个日期时间列，我想要不同类型的运算符和日期选择器选择器。
我已添加 dataInit日期选择器初始化为 searchoptions , 必要的运营商到 searchoptions.sopt .为了显示此运算符，我已将 searchOperators 设置为 true。所以对于这个专栏，一切正常。我有带有运算符(operator)选择器弹出窗口的日期选择器。但是对于所有其他列，默认操作符图标显示在它的左侧。这很烦人，因为运算符(operator)是默认的，用户无法更改它。那么是否有可能使用 jqGrid API 隐藏它们？据我所知，我只能使用我的自定义代码来隐藏它:

我需要检查我的列模型，并在渲染网格(可能在 loadComplete 中)后查看所有具有空 sopt 的列或 sopt.length == 0删除运算符(operator)选择器。或者添加隐藏它的 CSS 类。不确定这些解决方案中的哪一个更好(隐藏或删除)，因为删除可能会破坏某些逻辑，而隐藏可能会影响宽度计算。这是我在 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();
        }
    });
}

有人有更好的想法吗？

Answer 1

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

我只建议您稍微更改选择搜索工具栏的哪些列将获得搜索操作的标准。在我看来，在 searchoptions 中包含一些新属性似乎更本地化。 .这样你就可以写出类似的东西

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

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

修改后的 fiddle 演示你可以找到 here .我包含在来自 the fix 的演示 CSS 中(参见 the answer 和 the corresponding bug report )。完整代码如下

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

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