“JqGrid 不是函数”加载网格并工作后答案

【问题标题】："JqGrid is not a function" AFTER the grid is loaded and working“JqGrid 不是函数”加载网格并工作后
【发布时间】：2011-04-06 18:58:18
【问题描述】：

首先...这是我正在使用的。 jQuery 1.4.4 jQuery-UI 1.8.11 JqGrid 3.8.2

这是我在 HTML 中包含的内容

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

<script type="text/javascript" src="/resources/default/scripts/jquery/jqGrid/i18n/grid.locale-en.js"></script>

<script type="text/javascript" src="/resources/default/scripts/jquery/jqGrid/jquery.jqGrid.3.8.2.min.js"></script>

所有这些脚本链接都正常工作。这是我的网格定义：

$('#adminPermissionsGrid').jqGrid({
    url:'/admin/permission/get-permissions',
    mtype: 'GET',
    datatype: 'json',
    jsonReader: {
        id: 'id',
        repeatitems: false
    },
    colModel: adminPermissionsColumnModel,
    pager: '#adminPermissionsPager',
    rowNum: 50,
    altRows: true,
    hidegrid: false,
    sortname: 'resource',
    autowidth: true,
    height: 450,
    gridview: true,
    viewrecords: true,
    caption: translate.admin_table_permission_caption,
    onSelectRow: function(rowId, status) {
        populatePermissionForm(rowId);
    }
})
.navGrid('#adminPermissionsPager',{add:false, edit:false, del:false, search:false, refresh:true});

这里是“populatePermissionForm()”

function populatePermissionForm(rowId)
{
    //TODO : WTF? Why can't I use jqgrid functions here?
    var rowData = $('#adminPermissionsGrid').jqGrid('getRowData', rowId);
    ...
}

所以这是我的问题。我用 $(document).ready() 加载网格。网格按预期工作，其中包含大约 20 行数据。当我单击其中一行时，我在 firebug 中收到以下错误：

$("#adminPermissionsGrid").jqGrid is not a function

它报告这条线是罪魁祸首：

var rowData = $('#adminPermissionsGrid').jqGrid('getRowData', rowId);

我已经用 Firebug 检查了 $("#adminPermissionsGrid") ，它看起来仍然好像附加了网格对象。我花了几个小时试图找到这个问题的答案。似乎在初始加载后，我无法使用任何网格方法。我有一个 HACKY 解决方法可以浏览网格的 DOM，但我不想这样做......

有什么想法吗？

【问题讨论】：

我的超能力告诉我，$() 函数会在您第一次调用 jqGrid() 和调用 populatePermissionForm() 之间发生变化。你在页面中使用了除了jQuery之外的其他框架吗？
您可以尝试将populatePermissionForm的代码直接包含在onSelectRow中，看看是否有同样的问题。您还可以尝试制作可用于重现您的问题的演示。如果您另外发布来自服务器的测试 JSON 响应（您可以使用 Fiddler 或 Firebug 捕获数据），则可以在没有任何服务器组件的情况下使用该演示。
尝试在 onSelectRow 中包含 populatePermissionForm 的代码，但没有成功。 @frederic-hamidi 你的精神力量是正确的，如果我将它从 $ 更改为 jQuery，它就可以工作。但是，我没有使用任何其他框架。所以我必须弄清楚这一点......但感谢你让我走上正确的道路。
你的解释意味着你的代码覆盖了$或者至少$的一些方法。您可以在调试器中启动示例（IE 或 Chrome 或 Firebug 的开发工具就足够了）并检查全局 $ 对象。在这种方式下，应该可以本地化您进行更改的位置。

标签： javascript jquery jqgrid

【解决方案1】：

jQgrid 和 ZfDebug 使用 noConflict 方法时遇到了同样的问题。

首先加载ZfDebug工具栏脚本，然后它首先寻找jQuery......没有机会找到它，因为它是他自己的第一个！所以它从 google api 获取了一个旧版本的 jQuery，问题就开始了。

您可以选择向 ZfDebug 发送您想要的 jQuery 版本的路径，无论是否在本地。在你的 application.ini 中输入：

zfdebug.jquery_path = "/my_path_to_jquery/jquery-xxx.min.js"

（如果您愿意，也可以作为引导程序中的选项数组的成员）。

【讨论】：

【解决方案2】：

找到罪魁祸首！我正在使用依赖于 jQuery 的 Zend 的 ZFDebug 插件。这个插件会自动开启 noConflict。插件中没有选项可以切换它，但是当我注释掉 noConflict 行时......一切都按预期工作。

【讨论】：