我正在开发一个 Django 项目,该项目使用 JQgrid 显示数据库中的数据。
我想要实现的是仅连接搜索选项来执行远程搜索,其中服务器将返回结果集,并且所有其他 jqgrid 选项(如列排序、分页等)在客户端执行。
我知道这可以通过设置 loadonce:true
并在 'local'
和 之间切换
基于 'datatype'
参数来完成'json'.click()
事件,具体取决于我是否单击排序或下一页、搜索等。
还有其他方法可以做到这一点吗?如果没有,你们能建议一种干净的方法来完成上述黑客攻击吗?
谢谢!
最佳答案
我成功地完成了这项工作,我很高兴与大家分享这一点。我在解释下面发布了我的整个 jqgrid 代码,供您引用。
首先,我使用 JSON 来获取结果,因此使用 jsonReader。
接下来,以下是特定于实现 {{search: remote},{sorting: local}, {pagination: local}} 行为的设置。
设置
loadonce: false
,否则点击“搜索”按钮将不会点击服务器,而是始终执行本地搜索。我想实现 jqGrid 的多重搜索功能,因此希望在寻呼栏中显示微小的“放大镜”。
jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
现在,我实现远程搜索功能的方法是在 onSearch 和 onClose 事件上将数据类型从 local 切换为 json。即,在触发搜索查询时(即单击“查找”按钮),我将 loadonce 设置为 false,将数据类型设置为 json。这确保了远程搜索。 现在我们的网格填充了远程搜索数据,我们必须切换回 datatype:local,但是显式设置它 onClose 不起作用,所以我设置了 loadonce: true ,稍后再设置 datatype: local 本身。 另请注意,我有 closeAfterSearch: true、closeOnEscape: true,以便确保 onClose 事件在触发搜索查询后始终关闭。
jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true, onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'}); $("#list2").trigger("reloadGrid"); }, onClose: function(){$("#list2").trigger("reloadGrid"); $("#list2").setGridParam({loadonce: true}); $(".ui-icon-refresh").trigger('click'); } });
$(".ui-icon-refresh").trigger('click');
在加载结果后强制刷新。在某些情况下这是必要的(不知道为什么)。我只是自己偶然发现了这个修复程序,但我不确定它为什么有效。如果您有想法,我很想知道其背后的原因。
最后,每次我的网格加载时,搜索框都会默认弹出。因此,我只需让 jquery 单击模式框的“x”按钮即可强制关闭它。哈克但有效! :P
$(".ui-icon-closethick").trigger('click');
<<< 整个 jqGrid 代码 >>>
请原谅代码中的“xyz”。我在那里有一些 Django 代码,所以我只是用 xyz 替换它以避免任何混淆。
jQuery(document).ready(function(){
$("#list2").jqGrid({
url:'xyz',
datatype: 'json',
loadonce: false,
mtype: 'GET',
colNames:xyz
colModel :xyz,
jsonReader : {
repeatitems: false,
root: "rows",
page: "page",
total: "total",
records: "records"
},
height: '100%',
width: '100%',
pager: '#pager2',
rowNum:15,
rowList:[10,15,30],
viewrecords: true,
caption: ' ',
autowidth: false,
shrinkToFit: true,
ignoreCase:true,
gridview: true
});
jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{}, {multipleSearch:true});
jQuery("#list2").jqGrid('navButtonAdd', '#pager2',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
jQuery("#list2").jqGrid('columnChooser');
}
});
jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
$("#list2").trigger("reloadGrid");
},
onClose: function(){$("#list2").trigger("reloadGrid");
$("#list2").setGridParam({loadonce: true});
$(".ui-icon-refresh").trigger('click');
}
});
$(window).bind('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeGrids, 60);
divwidth = $(".content-box-header").width() - 40;
//alert(divwidth);
$("#list2").setGridWidth(divwidth,true);
});
$(window).resize();
$(".ui-icon-closethick").trigger('click');
});
关于jquery - 将 'Search' 设为远程,并将 jqGrid 中的其他所有内容(排序、分页等)设为本地,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11936149/