JQGrid:从过滤器恢复工具栏值和运算符
JQGrid : restoring toolbar values and operators from filter
我正在使用 JQGrid(版本 5.3.0)显示来自动态 table 的值(我事先不知道列号和列名)。我从对服务器的 ajax 调用中检索列架构,以及需要应用于网格的过滤器,并从那里创建 JQGrid。
我面临的问题是我找不到从传递给 table 的过滤器正确重新填充过滤器工具栏的方法。
代码如下:
$.ajax({
url: {url to get columns and filter},
type: 'POST',
postData: { productID: 98 }
success: function (result) {
if (result) {
$('#grid').jqGrid({
url: {url to get data},
datatype: 'json',
search: true,
postData: { productID: 98, filters: result.filter },
myType: 'GET',
colModel: result.columns,
jsonReader: {
root: 'Data',
page: 'Page',
total: 'Total',
records: 'PageSize'
},
pager: $('#gridpager'),
rowNum: 25,
gridview: false,
afterInsertRow: function (rowid, rowdata, rowelem) {
var color = rowelem.Color;
if (color != 'white') {
$("tr.jqgrow#" + rowid).addClass("color-" + color);
}
},
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true,
});
}
}
});
这是列模型的示例:
[
{
"name":"DESCRIPTION",
"label":"Description",
"searchoptions":
{
"sopt": ["bw","cn","nc","ew","eq","ne","in"],
"attr":{"class":"glyphicon glyphicon-filter"}
}
},
{
"name":"SKU_CODE",
"label":"SKU Code",
"searchoptions":
{
"sopt":["bw","cn","nc","ew","eq","ne","in"],
"attr":{"class":"glyphicon glyphicon-filter"}
}
},
{...}
]
这是过滤器:
"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"DESCRIPTION\",\"op\":\"bw\",\"data\":\"D\"}]}"
执行此代码时,从我的数据源加载数据,应用过滤器,但过滤器栏保持空白。
有没有办法使用传入参数中的过滤器值自动填充过滤器工具栏?我已经尝试解析过滤规则,并用匹配值填充输入,但我找不到恢复运算符的方法。
- 由于使用了 Guriddo jGrid 5.3 版,很高兴知道我们已经重写了 our documentation. Here you can find answer of a lot of your questions. In your case you should know that there is a method which do exactly what you want. The name of the method refreshFilterToolbar。由于在该方法的当前实现中未考虑 serchOperator,我们已在 GitHub 中修复该方法以支持它们。
如果您使用不支持 searchOperators 的现有方法,您的代码应如下所示:
$("#grid").jqGrid({
...
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true
}).refreshFilterToolbar({"filters": result.filter});
如果您使用 github 中支持 searchOperators 的版本,您的代码应该像这样
$("#grid").jqGrid({
...
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true
}).refreshFilterToolbar();
注意我们没有传filter参数,是自动获取的
- 我看到您使用 afterInsertRow 事件根据条件设置某些 class 行。仅当没有其他方法可以执行此操作时才应使用此事件。在相对大的数据集中使用此事件会导致读取缓慢,在某些情况下会导致挂起。一定要小心使用。
在您的情况下,您可以为此目的使用 rowattr 事件。请在同一文档页面中阅读更多相关信息。不要忘记将 gridview 设置为 true 或换句话说
...
rowNum: 25,
gridview: true,
rowattr: function (rowdata, rowelem) {
var color = rowelem.Color;
if (color != 'white') {
return { "class" : "color-" + color};
}
},
我正在使用 JQGrid(版本 5.3.0)显示来自动态 table 的值(我事先不知道列号和列名)。我从对服务器的 ajax 调用中检索列架构,以及需要应用于网格的过滤器,并从那里创建 JQGrid。
我面临的问题是我找不到从传递给 table 的过滤器正确重新填充过滤器工具栏的方法。
代码如下:
$.ajax({
url: {url to get columns and filter},
type: 'POST',
postData: { productID: 98 }
success: function (result) {
if (result) {
$('#grid').jqGrid({
url: {url to get data},
datatype: 'json',
search: true,
postData: { productID: 98, filters: result.filter },
myType: 'GET',
colModel: result.columns,
jsonReader: {
root: 'Data',
page: 'Page',
total: 'Total',
records: 'PageSize'
},
pager: $('#gridpager'),
rowNum: 25,
gridview: false,
afterInsertRow: function (rowid, rowdata, rowelem) {
var color = rowelem.Color;
if (color != 'white') {
$("tr.jqgrow#" + rowid).addClass("color-" + color);
}
},
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true,
});
}
}
});
这是列模型的示例:
[
{
"name":"DESCRIPTION",
"label":"Description",
"searchoptions":
{
"sopt": ["bw","cn","nc","ew","eq","ne","in"],
"attr":{"class":"glyphicon glyphicon-filter"}
}
},
{
"name":"SKU_CODE",
"label":"SKU Code",
"searchoptions":
{
"sopt":["bw","cn","nc","ew","eq","ne","in"],
"attr":{"class":"glyphicon glyphicon-filter"}
}
},
{...}
]
这是过滤器:
"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"DESCRIPTION\",\"op\":\"bw\",\"data\":\"D\"}]}"
执行此代码时,从我的数据源加载数据,应用过滤器,但过滤器栏保持空白。
有没有办法使用传入参数中的过滤器值自动填充过滤器工具栏?我已经尝试解析过滤规则,并用匹配值填充输入,但我找不到恢复运算符的方法。
- 由于使用了 Guriddo jGrid 5.3 版,很高兴知道我们已经重写了 our documentation. Here you can find answer of a lot of your questions. In your case you should know that there is a method which do exactly what you want. The name of the method refreshFilterToolbar。由于在该方法的当前实现中未考虑 serchOperator,我们已在 GitHub 中修复该方法以支持它们。
如果您使用不支持 searchOperators 的现有方法,您的代码应如下所示:
$("#grid").jqGrid({
...
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true
}).refreshFilterToolbar({"filters": result.filter});
如果您使用 github 中支持 searchOperators 的版本,您的代码应该像这样
$("#grid").jqGrid({
...
}).filterToolbar({
groupOp: 'AND',
defaultSearch: "cn",
searchOnEnter: true,
searchOperators: true,
stringResult: true
}).refreshFilterToolbar();
注意我们没有传filter参数,是自动获取的
- 我看到您使用 afterInsertRow 事件根据条件设置某些 class 行。仅当没有其他方法可以执行此操作时才应使用此事件。在相对大的数据集中使用此事件会导致读取缓慢,在某些情况下会导致挂起。一定要小心使用。
在您的情况下,您可以为此目的使用 rowattr 事件。请在同一文档页面中阅读更多相关信息。不要忘记将 gridview 设置为 true 或换句话说
...
rowNum: 25,
gridview: true,
rowattr: function (rowdata, rowelem) {
var color = rowelem.Color;
if (color != 'white') {
return { "class" : "color-" + color};
}
},