" Jqgrid loadoncomplete"从外部文件触发javascript

时间:2015-04-18 09:41:55

标签: jqgrid

我使用的是Firefox 37.x,jqGrid:4.7.0,jQuery:v1.11.2

流程:网格创建参数

datatype:"json",
jsonReader:{root:'rows',page:'page',total:'total',records:'records', userdata: "userdata",cell:'cell',id:'id'},
loadComplete:urlxdatafetch,
mtype:'GET',
hidegrid:false,
loadonce:true,
....

loadComplete可以从外部js文件触发外部JavaScript函数吗?

loadComplete:urlxdatafetch()

1 个答案:

答案 0 :(得分:1)

有很多选择可以做你想要的。最佳选择取决于*您计划在urlxdatafetch函数内执行的操作。

jqGrid支持回调和jQuery事件。因此,您可以使用一个回调函数loadComplete,也可以使用任意数量jqGridLoadCompletejqGridAfterLoadComplete事件处理程序。 jqGrid触发第一个jqGridLoadComplete事件,然后执行loadComplete回调,最后触发jqGridAfterLoadComplete事件。

我建议您在外部JavaScript文件中使用jqGridLoadCompletejqGridAfterLoadComplete事件,因为在这种情况下您将拥有大部分可扩展的解决方案。我在下面解释如何在那里使用。我将使用jqGridLoadComplete,但在使用jqGridAfterLoadComplete的情况下,情况也是如此。让我们在页面上显示<table id="grid"></table>,然后使用jqGrid将其转换为网格。所以你可以使用

$("#grid").bind("jqGridLoadComplete", function (e, data) {
    alert("jqGridLoadComplete is triggered for #grid");
});

了解您可以在创建网格后(使用$("#grid").jqGrid({...});)或创建网格之前进行此类绑定非常重要。建议的方法是在创建网格之前进行绑定,因为它是保证即使是第一次直接回答创建网格也会执行事件处理程序的唯一方法。例如,如果您使用datatype: "local",那么网格将在创建过程中直接填充,并且回调loadComplete(以及事件jqGridLoadCompletejqGridAfterLoadComplete)将立即执行。因此,如果重要的是不要错过第一次填充网格,那么您可以在创建网格之前进行绑定。

如果你更愿意使用loadComplete,那么你应该使用表格

loadComplete: urlxdatafetch

(不是loadComplete: urlxdatafetch()),您需要将urlxdatafetch函数定义为全局函数

<script type="text/javascript">
    function urlxdatafetch (data) {
        alert("loadComplete is triggered for #" + this.id);
    }
</script>

另一种常见模式是定义一个全局对象,如jQuery$,并将所有全局函数或全局变量设置为全局对象的方法/属性。< / p>

例如,我在同一个MyProject下开发了一个解决方案。所以我创建了一个JavaScript文件MyProject.common.js,我在我的解决方案的所有页面中jquery.jqgrid.min.js之后包含该文件:

<script src="MyProject.common.js"></script>

MyProject.common.js我定义的全局对象MyProject和其他一些

(function ($) {
    "use strict";
    window.MyProject = {
        urlxdatafetch: function (data) {
            alert("loadComplete is triggered for #" + this.id);
        }
    };
}(jQuery));

在其他JavaScript文件中我创建了jqGrid并使用loadComplete: MyProject.urlxdatafetch作为参数。在这种方式中,只有只有一个全局变量MyProject,并且您没有名称与页面上包含的其他JavaScript文件和jQuery插件冲突。

建议在jqGrid参数的默认值的MyProject.common.js文件设置中包含以使网格的后续装箱更简短,易读且易于维护。我建议您检查the documentation中描述的jqGrid选项的默认值。您会看到jsonReadermtype的值已经是默认值,您可以跳过此处。可以设置datatypehidegridloadonce的值

(function ($) {
    "use strict";
    window.MyProject = {
        urlxdatafetch: function (data) {
            alert("loadComplete is triggered for #" + this.id);
        }
    };
    $.extend(true, $.jgrid.defaults, {
        datatype: "json",
        hidegrid: false,
        loadonce: true,
        height: "auto",
        gridview: true,
        autoencode: true,
        headertitles: true,
        ignoreCase: true,
        loadui: "block",
        scrollrows: true
    });
}(jQuery));

我在上面包含了一些常见设置。您也可以定义默认回调函数的方式。设置此类默认值后,您可以减少在项目页面上使用的代码。