jqGrid中每列动态设置工具栏搜索运算符答案

【问题标题】：Dynamically setting toolbar search operator per column in jqGridjqGrid中每列动态设置工具栏搜索运算符
【发布时间】：2014-05-14 09:11:59
【问题描述】：

我目前正在使用 jqGrid 4.6.0 来可视化数据。我使用以下 CoffeeScript 来初始化我的网格。

@table = jQuery("#data_table").jqGrid({
  colNames: headers
  colModel: columns
  datatype: 'local'
  height: ($ '#' + @canvas).height() - 71
  width: ($ '#' + @canvas).width()
  gridview: true
  caption: ""
  data: rows
  hidegrid: false
  ignoreCase: true
  rowNum: 50
  autowidth: true
  viewrecords: true
  loadui: 'block'
  pager: '#toolbar_bottom'
})

@table.jqGrid('filterToolbar', { stringResult:  true,
                                 searchOnEnter: false, 
                                 searchOperators: true, 
                                 operandTitle: "Select Search Operation"})

我已启用搜索运算符以允许用户选择他们喜欢的过滤器操作数。因为我的应用程序非常通用，所以我在 searchoptions 的 sopt 参数中为数字字段启用了我发现的所有相关操作数，如下所示：

{
  name:           colId
  id:             colId
  sorttype:       'number'
  formatter:      nullFormatter
  searchoptions:  { sopt:['eq','ne','lt','le','gt','ge'] }
}

我的目标是为每一列保存用户当前选择的工具栏操作符。因此，我为每一列存储了表的当前过滤规则，如下所示：

@searchParams = jQuery.parseJSON(@table.getGridParam('postData').filters).rules

现在有趣的部分来了，在加载时，我使用 jQuery 使用搜索参数为每一列设置“输入”文本框，如下所示：

if @searchParams?
  for column in @searchParams
    inputId = regexEscape('gs_' + column.field)
    $('#' + inputId).val(column.data)

为了完成上述工作，我利用了每个输入都有一个我可以使用 jQuery 引用的 id 的事实。是否有任何等效的方法可以用来访问/更改位于文本框左侧的相邻过滤器运算符的值？（这是一个没有 id 的锚）。

如果我更改 colModel 中 sopt 数组的顺序，我怀疑我可以正确设置“默认”运算符，以便 @searchParams 中每一列的“op”变量在数组中排在第一位。但是，这也会更改用户单击以选择过滤器运算符时出现的下拉菜单的顺序，为了保持一致性，我不想这样做。谁能指导我如何正确地做到这一点？

我目前正集中精力拦截网格创建，以便在创建锚点时注入自己的 id 以便于访问。

以下是我想要的象形解释：

这是带有运算符“==”的图表列的默认外观。

这是我使用运算符“

这是从保存状态加载时的当前行为。我希望运算符是“

【问题讨论】：

你用的是哪个版本的jqgrid？
版本 4.6.0 - 我会将其添加到问题中。

标签： jquery jqgrid filter toolbar

【解决方案1】：

由于我仍然不知道如何合理地做到这一点，我利用了操作员与输入框的相对接近性以及它是唯一的类标识符。

以下 CoffeeScript 将恢复搜索输入和运算符类型/符号。

if @searchParams?
  for column in @searchParams
    # Restore the search input string
    inputId = regexEscape('gs_' + column.field)
    $('#' + inputId).val(column.data)

    # Restore the search filter type and operator symbol
    operator = $('#' + inputId).closest('tr').find('.soptclass')
    $(operator).attr('soper', column.op)
    operands = {  "eq":"==",
                  "ne":"!",
                  "lt":"<",
                  "le":"<=",
                  "gt":">",
                  "ge":">=",
                  "bw":"^",
                  "bn":"!^",
                  "in":"=",
                  "ni":"!=",
                  "ew":"|",
                  "en":"!@",
                  "cn":"~",
                  "nc":"!~",
                  "nu":"#",
                  "nn":"!#" }
    $(operator).text(operands[column.op])

【讨论】：