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

发布时间：2020-12-16 07:12:45 所属栏目：asp.Net 来源：网络整理

导读：我有很多列的jqGrid表.使用过滤器工具栏在网格中搜索.对于大多数人来说,搜索只是简单的默认运算符.对于一个datetime列,我想要不同类型的运算符和datepicker选择器. 我已将dataInit datepicker初始化添加到searchoptions,必要的运算符为searchoptions.sopt.为

我有很多列的jqGrid表.使用过滤器工具栏在网格中搜索.对于大多数人来说,搜索只是简单的默认运算符.对于一个datetime列,我想要不同类型的运算符和datepicker选择器.
我已将dataInit datepicker初始化添加到searchoptions,必要的运算符为searchoptions.sopt.为了显示这个运算符,我将searchOperators设置为true.所以对于这个专栏,一切都还可以.我有带操作符选择器弹出窗口的datepicker.但对于所有其他列,默认运算符图标显示在其左侧.运算符是默认的并且用户无法更改它,这很烦人.那么有可能使用jqGrid API隐藏它们吗？据我所见,我只能使用我的自定义代码隐藏它：

我需要检查我的列模型,并在渲染网格(可能在loadComplete中)之后检查所有具有空sopt或sopt.length == 0的列以删除运算符选择器.或者添加隐藏它的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();
        }
    });
}

有没有人有更好的想法？

解决方法

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

我只建议您稍微改变选择搜索工具栏的哪些列将获得搜索操作的标准.在我看来,在searchoptions中包含一些新属性更具原生性.这样你就可以写出像

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

我认为有些列,比如带有stype的列：“select”,仍然需要有sopt(至少是sopt：[“eq”]),但是人们不希望看到这些列的搜索运算符.在这种情况下,在列级别上指定搜索操作的可见性将非常实用.

修改过的小提琴演示你可以找到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();

它显示了与青年相同的结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!