在 jqGrid 中加载时触发客户端过滤 [英] triggering client-side filtering at load time in a jqGrid
问题描述
我正试图让 JqGrid 在它完成数据加载后进行一些客户端过滤(和排序).我可以正确设置搜索字段，但调用 TriggerToolbar() 似乎没有任何效果.
$("#list").GridUnload();var mygrid = $("#list").jqGrid({url: '@Url.Action("GetSearchCriteriaWithNoComponents", "SearchCriteria")',postData: { BookingSiteId: function () { return $("#BookingSiteId option:selected").val();}, MethodId: function () { return $("#MethodId option:selected").val();} },数据类型:'json'，mtype:'发布'，colNames:['Id'，'PID'，'Ori'，'Dest'，'Conn'，'Pos'，'Method'，'Billing'，'Filter'，'Pattern'，'Class'，'Wildcard', '组件', '评论'],col型号:[{名称:'Id'，索引:'Id'，宽度:30，隐藏:true}，{名称:'PID'，索引:'PID'，宽度:35}，{ 名称:'Ori'，索引:'Ori'，宽度:35 }，{ 名称:'Dest'，索引:'Dest'，宽度:35 }，{ 名称:'Conn'，索引:'Conn'，宽度:35 }，{ 名称:'Pos'，索引:'Pos'，宽度:35 }，{ 名称:'方法'，索引:'方法'，宽度:50 }，{ name: 'Billing', index: 'Billing', width: 45, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },{ name: 'Filter', index: 'Filter', width: 90, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },{名称:'模式'，索引:'模式'，宽度:100，搜索:真，stype:'文本'，搜索选项:{sopt:['cn']}}，{名称:'类'，索引:'类'，宽度:40 }，{ 名称:'通配符'，索引:'通配符'，宽度:50 }，{名称:'组件'，索引:'组件'，宽度:80，搜索:true，stype:'文本'，搜索选项:{sopt:['cn']}}，{名称:'评论'，索引:'评论'，宽度:75，搜索:真，stype:'文本'，搜索选项:{sopt:['cn']}}],寻呼机:'#pager'，行号:25，行总数:1000，行列表:[25,50,100]，排序名称:'起源'，排序顺序:asc"，观看记录:真实，加载一次:真，多选:真，忽略大小写:真，网格视图:是的，高度:100%"，标题:订阅的搜索条件没有组件"}).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false }).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-search", onClickButton: function () { mygrid[0].toggleToolbar() }, position: "first", title: "切换搜索工具栏", cursor: "pointer" }).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-refresh", onClickButton: function () { mygrid[0].clearToolbar() }, title: "清除搜索工具栏", 光标: "指针" });$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });如果(第一次运行 = 真){$("#gs_PID").val('AA');mygrid[0].triggerToolbar();第一次运行=假；}别的{mygrid[0].toggleToolbar();//默认隐藏工具栏}一般的想法是固定值将由视图模型中的某些内容填充.
当我们执行 gridUnload() 和随后的重新加载时，我们还希望有保存和恢复过滤器和排序选择的选项，但一次只有一个障碍.@Url.Action 等带有@prefixes 的东西是Razor 标记，在页面发送到浏览器之前处理.
您将 datatype: 'json' 与 loadonce: true 结合使用.因此，您应该在 loadComplete 事件句柄内调用 mygrid[0].triggerToolbar().只有在加载数据后，您才应该过滤数据.可能您应该将带有 triggerToolbar 的代码放在 setTimeout 方法中，以便在 datatype 更改为 'local 之后已经开始过滤' 在 loadonce: true 期间.因此，您的 loadComplete 事件句柄的代码可能如下所示:
loadComplete: function () {var gridDOM = 这个；//将 $("#list")[0] 保存在一个变量中if ($(this).jqGrid('getGridParam', 'datatype') === 'json') {//从服务器第一次加载设置超时(函数(){$("#gs_PID").val('AA');gridDOM.triggerToolbar();}, 100);}}另外，我不完全理解您如何使用您发布的代码片段以及为什么需要使用 gridUnload 方法.
更新: Free jqGrid fork of jqGrid 支持 forceClientSorting: true 选项，强制排序和可选过滤从服务器返回的数据，之前显示第一页数据.它使上述代码不需要.而不是那个可以设置 postData.filters 使用
forceClientSorting: true,搜索:真，发布数据: {过滤器:{groupOp:和"，规则:[{ op:le"，字段:PID"，数据:AA"}]}}参见演示.p>
I'm trying to get a JqGrid to do some client-side filtering (and sorting) just after it has finished loading in the data. I can set the search-field correctly, but calling TriggerToolbar() doesn't seem to have any effect.
$("#list").GridUnload();
var mygrid = $("#list").jqGrid({
url: '@Url.Action("GetSearchCriteriaWithNoComponents", "SearchCriteria")',
postData: { BookingSiteId: function () { return $("#BookingSiteId option:selected").val(); }, MethodId: function () { return $("#MethodId option:selected").val(); } },
datatype: 'json',
mtype: 'Post',
colNames: ['Id', 'PID', 'Ori', 'Dest', 'Conn', 'Pos', 'Method', 'Billing', 'Filter', 'Pattern', 'Class', 'Wildcard', 'Components', 'Comment'],
colModel: [
{ name: 'Id', index: 'Id', width: 30, hidden: true },
{ name: 'PID', index: 'PID', width: 35 },
{ name: 'Ori', index: 'Ori', width: 35 },
{ name: 'Dest', index: 'Dest', width: 35 },
{ name: 'Conn', index: 'Conn', width: 35 },
{ name: 'Pos', index: 'Pos', width: 35 },
{ name: 'Method', index: 'Method', width: 50 },
{ name: 'Billing', index: 'Billing', width: 45, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
{ name: 'Filter', index: 'Filter', width: 90, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
{ name: 'Pattern', index: 'Pattern', width: 100, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
{ name: 'Class', index: 'Class', width: 40 },
{ name: 'Wildcard', index: 'Wildcard', width: 50 },
{ name: 'Components', index: 'Components', width: 80, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
{ name: 'Comment', index: 'Comment', width: 75, search: true, stype: 'text', searchoptions: { sopt: ['cn']} }
],
pager: '#pager',
rowNum: 25,
rowTotal: 1000,
rowList: [25, 50, 100],
sortname: 'Origin',
sortorder: "asc",
viewrecords: true,
loadonce: true,
multiselect: true,
ignoreCase: true,
gridview: true,
height: "100%",
caption: 'Subscribed Search Criteria without Components'
}).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false }
).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-search", onClickButton: function () { mygrid[0].toggleToolbar() }, position: "first", title: "Toggle Search Toolbar", cursor: "pointer" })
.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-refresh", onClickButton: function () { mygrid[0].clearToolbar() }, title: "Clear Search Toolbar", cursor: "pointer" }
);
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
if(firstrun = true)
{
$("#gs_PID").val('AA');
mygrid[0].triggerToolbar();
firstrun = false;
}
else
{
mygrid[0].toggleToolbar(); //hide the toolbar by default
}
The general idea is that the fixed value will be populated with something from the viewmodel.
We would also like to have the option of saving and restoring filter and sorting selection for when we do gridUnload() and subsequent reloads, but one hurdle at a time. stuff with @prefixes such as @Url.Action is Razor markup, which is handled before the page is sent to the browser.
You use datatype: 'json' in combination with loadonce: true. So you should call mygrid[0].triggerToolbar() inside of the loadComplete event handle. Only after the data are loaded you should filter the data. Probably you should place the code with triggerToolbar inside of setTimeout method to start the filtering already after the datatype will be changed to 'local' during loadonce: true. So the code of your loadComplete event handle could be about the following:
loadComplete: function () {
var gridDOM = this; // save $("#list")[0] in a variable
if ($(this).jqGrid('getGridParam', 'datatype') === 'json') {
// the first load from the server
setTimeout(function () {
$("#gs_PID").val('AA');
gridDOM.triggerToolbar();
}, 100);
}
}
Additionally I don't full understand how you use the code fragment which you posted and why you need to use gridUnload method.
UPDATED: Free jqGrid fork of jqGrid supports forceClientSorting: true option, which force sorting and optional filtering of the data, returned from the server, before displaying the first page of data. It makes unneeded the above code. Instead of that one can set postData.filters use
forceClientSorting: true,
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "le", field: "PID", data: "AA" }
]
}
}
see the demo.
这篇关于在 jqGrid 中加载时触发客户端过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
