jQgrid filterToolbar 因 searchOnEnter 而失败
Posted
技术标签:
【中文标题】jQgrid filterToolbar 因 searchOnEnter 而失败【英文标题】：jQgrid filterToolbar fails with searchOnEnter 【发布时间】：2016-06-14 20:31:52 【问题描述】：我有一个公开的 Web 服务，它以 JSON 或 XML 格式返回数据。我已经设置了一个 JSP 页面并添加到 jQgrid 中。数据显示得很好，但是当我尝试使用 filterToolbar 过滤结果时它失败了。萤火虫说“ TypeError: jQuery.jgrid 未定义".
我已经阅读了几乎所有关于 jQuery 和 jqGrid 的帖子，但我不知道为什么会出现这个错误。我正在从 appfuse 原型运行休眠和 Spring MVC。 /services/api/vulnss 将根据请求的类型返回 xml 或 json。 json 和 XML 都可以很好地填充网格，我可以对所有内容进行排序和分页。
<html>
<head>
<link href="/resources/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<link href="/resources/css/ui.jqgrid-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/resources/css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/resources/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resources/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/resources/js/jquery.jqGrid.min.js"></script>
</head>
还有脚本部分：
<script type="text/javascript">
var $j = jQuery.noConflict(); (函数($j)
$j().ready(function ()
$j("#jqGrid").jqGrid(
url: '/services/api/vulns',
mtype: "GET",
//styleUI : 'Bootstrap',
datatype: "xml",
colModel: [
label: 'idcveconfig', name: 'idcveconfig', key: true, width: 75 ,
label: 'cveid', name: 'cveid', width: 150 ,
label: 'product', name: 'product', width: 150 ,
label: 'version', name: 'version', width: 150 ,
label:'vendor', name: 'vendor', width: 150 ,
label:'vulnsummary', name: 'vulnsummary', width: 150
],
viewrecords: true,
loadonce: true,
height: 250,
rowNum: 20,
gridview: true,
pager: "#jqGridPager",
caption: "LOading data from server at once",
xmlReader :
root: "List",
row: "item",
//page: "rows>page",
//total: "rows>total",
//records : "rows>records",
repeatitems: false,
//cell: "cell",
//id: "[id]",
//userdata: "userdata",
);
$j("#jqGrid").filterToolbar(searchOnEnter : true);
);
)( jQuery );
我用 chrome 打开了开发工具，在控制台中我用 $j 交换了 jQuery，它返回了 fale。我不确定它应该返回什么，但字符串 307 存在于“idcveconfig”字段中。
【问题讨论】：
你能把它添加到 jsfiddle 吗？ 您使用哪个版本的 jqGrid 以及来自哪个分支的 jqGrid（free jqGrid、Guriddo jqGrid JS 或版本 the wiki）并验证免费 jqGrid 中是否也存在问题？如果问题存在，请提供demo（非最小化jquery.jqgrid.src.js），可用于重现问题。
我使用的是来自 Guriddo 的最新版本，所以是 5.2。切换到免费的 jqGrid 后，我看到一些 UI 的东西清晰了，它在 chrome 上运行得更好。但我仍然在同一个地方失败。但失败更清楚一点。现在它说“Uncaught TypeError: Cannot read property 'getAccessor' of undefined”(String(jQuery.jgrid.getAccessor(this,'idcveconfig')).toUpperCase().substr(0,3) == String("307" ).toUpperCase())"
我将获得一个有效的演示设置并在明天分享。
@BobbyKing：我无法在免费的 jqGrid 中重现该问题。 jqGrid 需要在当前实现中使用 global jQuery，但它会在你的代码中设置。所以可能是其他问题，提供相应demo后才能发现。
【参考方案1】：
当前的过滤实现使用 global jqGrid。它不能使用您在noConflict() 中设置的$j。我建议你包括
<script type="text/javascript">
$.jgrid = $.jgrid || ;
$.jgrid.no_legacy_api = true;
</script>
在jquery.jqGrid.min.js 之前并仅使用jqGrid 方法的样式，仅以$j("#jqGrid").jqGrid("filterToolbar", searchOnEnter: true); 形式而不是$j("#jqGrid").filterToolbar(searchOnEnter: true);。它减少了可能的冲突。此外，您应该设置全局 jQuery 变量（如 window.jQuery = $j;）。
更新：我更准确地检查了您的代码，在我看来，您应该对filterToolbar 的使用没有任何问题。您当前的代码仍然设置 global jQuery 变量，jqGrid 需要使用该变量。我尝试使用非常接近的代码和免费的 jqGrid 并且没有问题。我认为你可以准备的演示可以清除所有内容。
【讨论】：
我也试过这个......以防万一。我得到了同样的结果。 “未捕获的 TypeError：无法读取未定义的属性 'getAccessor'” @BobbyKing: the demo 使用您的代码，我认为没有问题。我使用免费的 jqGrid 4.13.0 谢谢！这有帮助。即使在复制/粘贴您的代码之后，我仍然会收到错误消息，这告诉我我的 webapp 中存在某种冲突。我正在使用运行 Spring MVC 和 Hibernate 的 Appfuse 原型。我认为通过将所有内容包装在一个函数中并将 $ 替换为 $j 可以避免冲突，尤其是在打开 .noConflict 的情况下。 @BobbyKing：不客气！我制作了一些small modifications 的免费 jqGrid 并发布到 GitHub。现在免费的 jqGrid 可以完全隔离工作，无需任何全局jQuery 变量。我不完全理解您对 Spring MVC 的问题，但如果您准备在线演示，我可以调试（它使用免费 jqGrid 的非最小化 jquery.jqGrid.src.js），我可以帮助您找到原因。跨度>
我正在缩小范围。我正在使用velocity，它在页面周围添加了一些其他JSP 和脚本。当我从他们中排除这个页面时，它工作得很好。所以问题在于这些装饰器 JSP 与 jQuery 冲突，即使 noConflict 已被调用。我正在寻找首先调用 jQuery 并将其置于非冲突模式的 JSP，因为文档中说将第一个调用的 JSP 置于非冲突模式。【参考方案2】：
感谢@Oleg 让我指出正确的方向！
以下是可能使用相同设置的用户的完整方案。我使用 Appfuse.org Appfuse Spring MVC 和 hibernate 原型创建了一个 webapp。该框架附带大量附加功能，有助于使该应用程序运行得非常流畅，但文档并没有真正讨论其中包含的所有功能。
Appfuse 包含一个加载大量脚本的 Web 资源优化器，我假设它可以提高性能。此 WRO 创建一个名为“main.js”的脚本文件，该文件是加载到 WRO.XML 中的任何脚本的组合。加载 main.js 时，它会覆盖您的本地/受保护变量，并与我正在加载的 jquery 产生冲突。
我从 WRO.xml 和 EUREKA 中删除了 jquery！！！！有用！我的下一步是尝试将我的 jqgrid 脚本移动到 WRO.xml 并查看它是否也有效。
【讨论】：
以上是关于jQgrid filterToolbar 因 searchOnEnter 而失败的主要内容，如果未能解决你的问题，请参考以下文章