能否在不覆盖先前事件处理程序的情况下将多个事件处理程序绑定到JqGrid事件？

Question

例如，我在每次页面加载时调用我的默认设置，并绑定一个函数到loadComplete来为我的网格做一些基本的格式化。

在一些页面上，我有额外的逻辑希望同时执行，但如果我在网格定义中设置loadComplete，它将覆盖我默认设置中设置的函数。

有没有一种方法可以绑定多个处理程序，或者执行所有必要的代码的其他方式？提前感谢。

- IronicMuffin

Answer 1

我认为您询问的是jqGrid当前版本存在的一个重要问题。现在很难实现多个事件处理程序，这对于使用jqGrid的小型项目来说并不重要，但如果您想构建一些解释jqGrid的类，则可能很重要。您目前的解决方法是可以的，但有一定的限制，您自己也理解。主要问题是您只能实现仅一个附加的loadCompleteEx处理程序。

我建议您使用jQuery.trigger或更好的jQuery.triggerHandler。您可以与jQuery.bind和jQuery.unbind一起使用。通过这种方式，您可以定义任意数量的事件处理程序，其工作方式类似于标准的jQuery事件。

例如，

var grid = $("#list");

grid.bind('jqGridLoadComplete',function(e,data) {
    alert ("in first jqGridLoadComplete event handler. Called for the page " +
           data.page);
});
grid.jqGrid({
    // jqGrid parameters
    // ...
    loadComplete: function(data) {
        alert("main load complete");
        $(this).triggerHandler("jqGridLoadComplete", data);
    }
});
grid.bind('jqGridLoadComplete.jqGrid',function(e,data) {
    alert ("in second jqGridLoadComplete event handler. Called for the page " +
           data.page);
});

在第二个 jQuery.bind 中，我使用了命名空间 'jqGrid' 中的命名空间事件 'jqGridLoadComplete.jqGrid'。因此，您可以使用您所知道的（以及需要的）有关 jQuery 标准事件的所有内容。

请参见相应的演示此处。尝试在网格中切换页面或更改排序以调用 loadComplete。

我在 jqGrid 定义之后绑定了第二个 jqGridLoadComplete。因为我的演示使用了 datatype:'local'，所以第一次调用 loadComplete 将在绑定执行之前。因此，在第一次 loadComplete 执行时，第二个 jqGridLoadComplete 事件处理程序不会被调用。因此，最好在 jqGrid 定义之前绑定事件处理程序。在这种情况下，您可以确保事件将始终被调用。 更新：重要！！！如果您使用当前版本的jqGrid，则loadComplete中不需要显式触发jqGridLoadComplete事件。 jqGrid已经为您执行此操作。上述代码是在jqGrid的主代码中包含相应功能之前编写的。答案仅描述了如何在jqGrid中实现多个事件处理程序的主要思想。在编写答案后，我向trirand发布了一些拉取请求，建议在jqGrid中实现jQuery事件。从版本4.3.2开始（请参见这里），jqGrid支持这些事件。

- Oleg

---

一个可能更简单的解决方案是使用我的响应和函数数组，按顺序执行它们所有。我猜想使用bind函数更加常规/最佳实践。 - IronicMuffin

@IronicMuffin：有不同的小子问题和不同的使用方式。bind方法使用jQuery.data，以events作为键。该值具有jqGridLoadComplete作为数组（请参见此处）。如果您只是将loadCompleteEx作为自己的数组使用，则可以实现当前的解决方法，但是您应该小心。在哪里分配数组？它是否适用于多个网格等。我认为“触发”方式更灵活。 - Oleg

Answer 2

我的临时解决方案：

// Global Variable in my common.js
var loadCompleteEx;

// set defaults
$.extend($.jgrid.defaults, {
     datatype: 'json',
     height: "100%",
     ...
     loadComplete: function () {
         if ($("#grid").getGridParam("reccount") === 0)
            $("#empty-grid-message").show();
         else
            $("#empty-grid-message").hide();

         // if loadCompleteEx is defined, call it at the end of loadComplete
         if (loadCompleteEx)
             loadCompleteEx();
      }
}

// In my specific page js
loadCompleteEx = function () {
    // Do more stuff after load completes
};

运行得很好...这里有什么不良实践吗？

- IronicMuffin

Answer 3

如果你想在请求之前做一些事情，可以使用beforeRequest函数。

你也可以将一个函数绑定到gridComplete选项。你能否给出一个代码示例来展示你想要做什么？

- Evan

---

gridComplete只会触发一次，如果我需要在每次加载时进行格式化处理，那么这种方法就不可行了。例如，如果网格为空，我会显示自定义消息。我必须在每次加载时检查它。现在，如果我想对空网格进行其他逻辑操作，我不能简单地添加到loadComplete中，因为它会被覆盖。 - IronicMuffin

Answer 4

对于这个问题，有一个比我在其他任何地方看到的建议都要简单得多的解决方案：

// Set defaults
jQuery.extend(jQuery.jgrid.defaults, {
    loadComplete: function () {
        myCustomFunction();
    }
});

loadComplete: function() {
    // someOtherFunction();
    $.jgrid.defaults.loadComplete(); // Runs myCustomFunction()
},

- Ben