在jqGrid中动态设置每个列的工具栏搜索运算符 [英] Dynamically setting toolbar search operator per column in jqGrid
问题描述
@table = jQuery（＃data_table）。jqGrid（{
colNames：
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}）
我已经打开搜索运算符来允许用户选择他们喜欢的过滤器操作数。因为我的应用程序非常普遍，所以我已经在搜索选项的数字字段的sopt参数中启用了所有相关的操作数，例如：
{
名称：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 @searchParams中的列
inputId = regexEscape（'gs_'+ column.field）
$（'＃'+ inputId）.val（column.data）
为了达到上述目的，我利用了每个输入都有一个id的事实，我可以使用jQuery进行引用。是否有任何等价的方法可以用来访问/更改坐在文本框左侧的相邻过滤器操作符的值？ （这是一个没有ID的锚点）。
我怀疑如果我改变了colModel中sopt数组的顺序，我就可以正确设置default @searchParams中的每个列的op变量将首先出现在数组中。但是，这也会改变用户点击选择过滤器运算符时出现的下拉顺序，这是我不想为了一致性而做的。任何人都可以指导我如何正确地做到这一点？
我目前正在集中精力拦截网格创建，以便我可以注入自己的id创建为便于访问。
以下是我想要的象形解释：
这是默认使用运算符==查看图表列。
$ b pre
$ b $ p
$ b $ p
这是从保存状态加载的当前行为。我希望操作符是< =而不是==。
已经利用了运算符与输入框的相对接近性，它是唯一的类标识符。
下面的CoffeeScript将恢复搜索输入和运算符类型/符号。 / p>
if @searchParams？
用于@searchParams中的列
＃恢复搜索输入字符串
inputId = regexEscape（'gs_'+ column.field）
$（'＃'+ inputId）.val column.data）
＃恢复搜索过滤器类型和运算符符号
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]）
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 "==".
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])
这篇关于在jqGrid中动态设置每个列的工具栏搜索运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
