jqGrid 与 Zend 框架 (zfdatagrid)答案

【问题标题】：jqGrid with Zend Framework (zfdatagrid)jqGrid 与 Zend 框架 (zfdatagrid)
【发布时间】：2012-05-04 23:46:40
【问题描述】：

这几天我找不到正常的答案。我希望有人可以帮助我。

我在 Zend Framework 应用程序中使用 jqGrid。我希望我的应用程序中的网格可以内联编辑 (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing)。当我不使用 ZF 并且我自己编写 jqGrid 代码（java 脚本）时 - 内联编辑工作正常。但是在使用 ZF 类“Bvb_Grid_Deploy_JqGrid”并部署网格时，ZF 会自己生成 java 脚本。我找不到正确插入js函数“onSelectRow”的ZF方法的问题。尝试使用“$grid->jqAddOnLoad($js);”在 ZF 控制器中，但这个 java 脚本代码看起来不像示例中那样，然后网格根本没有正常加载。必须是：

jQuery().ready(function (){
  jQuery("#jqg_RentAsset").jqGrid(
  {
    height: 250,
     ...
    multiselect: true,
    caption: "Manipulating Array Data",
    onSelectRow: function(id)
    {
      alert(id);
    }
  });

但是发生了：

$(document).ready(function() {
  jQuery("#jqg_RentAsset").jqGrid(
  {
    onSelectRow: function(id)
    {
      alert(id);
    }
  });
  jQuery("#jqg_RentAsset").jqGrid(
  {
    "height":"250",
      ...
  });

也许有人知道我必须在 ZF 控制器中使用什么方法，或者我需要编写 java 脚本有多么不同？

【问题讨论】：

标签： javascript jquery zend-framework jqgrid

【解决方案1】：

我自己不使用 Zend 框架。所以我的建议很常见，它们独立于您使用的框架。

在下面的示例中，我将展示如何在网格上动态设置onSelectRow 以实现对行选择的内联编辑。我想网格中已经存在其他必需的设置，例如 colModel 和 editurl 选项的 editable: true 属性。所以我只动态显示onSelectRow的设置。

第一种方法是使用setGridParam 设置onSelectRow 回调。对应的demo使用如下代码：

$(function () {
    var $grid = $("#list"),
        editingRowId,
        myInlineEditingOptions = {
            keys: true,
            oneditfunc: function (id) { editingRowId = id; },
            afterrestorefunc: function () { editingRowId = undefined; },
            aftersavefunc: function () { editingRowId = undefined; }
        };

    $grid.jqGrid({
        datatype: 'local',
        ....
        editurl: 'clientArray'
    });

    // now we set or change onSelectRow callback AFTER jqGrid is created
    $grid.jqGrid('setGridParam', {
        onSelectRow: function (id) {
            if (id !== editingRowId) {
                if (typeof editingRowId !== "undefined") {
                    // save previously editing row
                    //$(this).jqGrid("saveRow", editingRowId, myInlineEditingOptions);

                    // discard changes from the previously editing row
                    $(this).jqGrid("restoreRow", editingRowId, myInlineEditingOptions);
                }
                // start inline editing. The user should save the row by pressing ENTER
                $(this).jqGrid("editRow", id, myInlineEditingOptions);
            }
        }
    });
});

在上述场景中，重要的是要提及

我们可以设置（或更改）onSelectRow在创建 jqGrid 之后。
在网格中可以只有一个onSelectRow回调。设置新的onSelectRow 回调覆盖现有的。

最后一个限制可能非常严格。例如，您不能实现一些默认的onSelectRow 操作，这些操作应该对项目中的所有网格执行，而对一些其他特定操作使用额外的onSelectRow。这是引入类 jQuery 事件的主要原因，这些事件可以非常接近回调的形式使用。下一个示例演示了该技术。

The next demo 的工作方式与前一个完全相同，但它使用jqGridSelectRow 事件而不是onSelectRow 回调。新技术有两个重要的优点

可以设置jqGridSelectRow 事件处理程序在 jqGrid 创建之前或之后。如果您使用jQuery.bind 绑定事件处理程序，那么将被转换为网格的<table> 元素应该存在。如果使用更慢一点的jQuery.delegate、jQuery.live 或jQuery.on（最后一个从 jQuery 1.7 开始存在）可以绑定事件处理程序。
一个可以设置多个 jqGridSelectRow 事件处理程序，所有这些事件处理程序将在唯一的onSelectRow 回调（如果存在）之前执行。通过这种方式，您可以在jqGridSelectRow 事件处理程序中实现一些常见操作，并且可以使用额外的jqGridSelectRow 事件处理程序或onSelectRow 回调到特定于网格的操作。对于完成操作，您可以使用onSelectRow 回调。

对应的代码如下

$(function () {
    var $grid = $("#list"),
        editingRowId,
        myInlineEditingOptions = {
            keys: true,
            oneditfunc: function (id) { editingRowId = id; },
            afterrestorefunc: function () { editingRowId = undefined; },
            aftersavefunc: function () { editingRowId = undefined; }
        };

    $grid.bind("jqGridSelectRow", function (e, id) {
        if (id !== editingRowId) {
            if (typeof editingRowId !== "undefined") {
                // save previously editing row
                //$(this).jqGrid("saveRow", editingRowId, myInlineEditingOptions);

                // discard changes from the previously editing row
                $(this).jqGrid("restoreRow", editingRowId, myInlineEditingOptions);
            }
            // start inline editing. The user should save the row by pressing ENTER
            $(this).jqGrid("editRow", id, myInlineEditingOptions);
        }
    });

    $grid.jqGrid({
        datatype: 'local',
        ....
        editurl: 'clientArray'
    });
});

更新：我忘了提，在事件绑定期间可以使用命名空间。这在更复杂的场景中非常有用。如果有人使用$grid.bind("jqGridSelectRow.myNamespace", ...);，那么您将能够使用$grid.unbind('.myNamespace'); 或$grid.unbind('jqGridSelectRow.myNamespace'); 仅取消绑定自己的事件。它不会取消绑定具有其他命名空间的其他事件。

【讨论】：

谢谢。你帮了我很多！

【解决方案2】：

我改变了一点行为。我在 ZF 视图（phtml 文件）中编写了 java 脚本“onSelectRow”，例如：

<?php $this->headScript()->captureStart() ?>
$(document).ready(function() {
    var lastSel;
    jQuery("#jqg_RentAsset").jqGrid('setGridParam', {
        onSelectRow: function(id)
        { 
            alert(id);
        }
    });
});
<?php $this->headScript()->captureEnd() ?>

及其工作。我需要的是 "setGridParam" 但实际上这个东西不能使用“$grid->jqAddOnLoad($js);”在 ZF 控制器中。当我有时间的时候，我会调查还有什么需要做的。但现在我很高兴。此外，也许有可能使用“$grid->setParams(array)”... 再感谢一次。 :)

【讨论】：