javascript - Zend フレームワークを使用した jqGrid (zfdatagrid)

Question

数日で、私は通常の答えを見つけることができませんでした。誰かが私を助けてくれることを願っています。

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 スクリプトをどのように記述する必要があるかを誰かが知っているのではないでしょうか?

score 2 · Accepted Answer

私自身は Zend Framework を使用していません。したがって、私の提案は一般的であり、使用するフレームワークには依存しません。

以下の例では、グリッド上で動的に設定onSelectRowして行選択のインライン編集を実装する方法を示します。editable: trueのプロパティcolModelやオプションなどの他の必要な設定editurlは、グリッドに既に存在していると思います。onSelectRowそのため、動的の設定のみを示します。

最初の方法は、を使用してコールバックsetGridParamを設定することです。onSelectRow対応するデモでは、次のコードを使用します。

$(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);
            }
        }
    });
});

上記のシナリオでは、次のことに言及することが重要です

jqGrid の作成onSelectRow 後に設定 (または変更)できます。
グリッド内のコールバックは1 つだけ です。onSelectRow新しいonSelectRowコールバックを設定すると、既存のコールバックが上書きされます。

最後の制限は非常に難しい場合があります。onSelectRowたとえば、プロジェクト内のすべてのグリッドに対して実行する必要があるいくつかのデフォルトアクションを実装し、追加の特定のアクションに追加onSelectRowを使用することはできません。これが、コールバックに非常に近い形式で使用できる jQuery のようなイベントを導入した主な理由でした。次の例は、この手法を示しています。

次のデモは前のデモとまったく同じように機能しますが、コールバックjqGridSelectRowの代わりにイベントを使用しonSelectRowます。新しい技術には2つの重要な利点があります

jqGrid が作成される前またはその後にjqGridSelectRow、イベントハンドラーを設定できます。jQuery.bindを使用してイベントハンドラーをバインドする場合、グリッドに変換される要素が存在する必要があります。もう少し遅いjQuery.delegate、jQuery.liveまたはjQuery.on (最後のものは jQuery 1.7 から存在します) を使用する場合は、いつでもイベントハンドラーをバインドできます。<table>
唯一のコールバック (存在する場合)の前に実行される複数のjqGridSelectRowイベントハンドラーを設定できます。イベントハンドラーでいくつかの一般的なアクションを実装し、追加のイベントハンドラーまたはコールバックを使用して特定のアクションをグリッドにすることができます。ファイナライズアクションには、コールバックを使用できます。onSelectRowjqGridSelectRowjqGridSelectRowonSelectRowonSelectRow

対応するコードは次のようになります

$(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');

score 0 · Accepted Answer

少し挙動を変えました。次のように、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)」を使用する可能性があるかもしれません...もう一度ありがとう。:)

javascript - Zend フレームワークを使用した jqGrid (zfdatagrid)

2 に答える 2

Related

Reference