Dynamically setting toolbar search operator per column in jqGrid

Question

I'm currently using jqGrid 4.6.0 to visualize data. I've used the following CoffeeScript to initialize my grid.

@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"})

I've turned on search operators to allow users to select their preferred filter operand. Because my application is very general, I've enabled what I've found to be all relevant operands in the searchoptions's sopt parameter for numeric fields like so:

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

My goal is to save the user's currently selected toolbar operator for each column. Therefore, I store the table's current filter rules for each column as shown below:

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

Now comes the fun part, at load time, I use jQuery to set the "input" textbox for each column using search params, as demonstrated below:

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

To do the above, I take advantage of the fact that each input has an id I can reference using jQuery. Is there any equivalent method I could use to access/change the value of neighbouring filter operator sitting to the left of the textbox? (It's an anchor with no id).

I suspect I could correctly set the "default" operator correctly if I changed the order of the sopt array in colModel so that the "op" variable of each column in @searchParams would come first in the array. However, this would also change the order of the drop down that appears when a user clicks to select a filter operator, which I don't want to do for consistencies' sake. Can anyone guide me towards how to do this correctly?

I'm currently focusing my efforts on intercepting the grid creation so that I can inject my own id's when the anchors are created for easy access.

The following is a pictographical explanation of what I want:

This is the default look of a chart column with operator "==".

This is the chart after I've a applied a filter to the column with operator "<=".

This is the current behavior on load from a saved state. I want the operator to be "<=" not "==".

Answer 1

Since I'm still not aware of a way to do this reasonably, I've taken advantage of the operator's relative proximity to the input box and it's unique class identifier.

The following CoffeeScript will restore both the search input and the operator type/symbol.

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])