jqGrid过滤器工具栏显示搜索运算符选择器仅用于单列

我有许多列的jqGrid表。在网格中搜索使用过滤器工具栏。对于大多数人来说，搜索只是简单的默认操作符。对于一个日期时间列，我想要不同类型的运算符和datepicker选择器。我已经添加了dataInit datepicker初始化为searchoptions，必要的操作符为searchoptions.sopt。为了显示这个操作符，我将searchOperators设置为true。所以对于这一列，一切都很好。我有运营商选择器弹出式日期选择器。但是对于所有其他列，默认操作员图标显示在其左侧。这是令人讨厌的，因为运营商是默认的，用户无法改变它。那么是否有可能使用jqGrid API来隐藏它们？至于我能看到我可以隐藏这只是用我的自定义代码：jqGrid过滤器工具栏显示搜索运算符选择器仅用于单列

我需要检查我的列模型和渲染网格后（可能是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(); 
     } 
    }); 
}

没有任何人有一些更好的想法样？

来源

2013-07-17 Yauhen.F

我觉得这个想法定义了搜索操作的可见性在每一列非常好的主意。从我+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();

它显示了同样的结果就像青春：

enter image description here

来源

2013-07-18 15:31:45 Oleg

jqGrid过滤器工具栏显示搜索运算符选择器仅用于单列

回答

相关问题