4

JSONデータなど、列「name」にチェックボックスが埋め込まれたtreeGridを作成しました。

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true}

これらのチェックボックスは木の余白に続くためです（私はフランス人なので、よく理解されていると思います）。

1行をマーク/マーク解除するときにサブレベルのチェックボックスをオン/オフにしたいのですが、投稿を読んだ後、期待どおりの結果を得ることができます。

例の説明：親行のチェックボックスをクリックすると（チェックされていない状態になります）、サブレベルの行がチェックされていない状態になります

私はjqGridの初心者ですが、プロパティを学びたい素晴らしいツールです。このように私を運転してくれませんか？それとも、私がやりたいことの例をどこで見つけることができるかを提案できますか？ドキュメントを探しましたが、成功しませんでした。

よろしくお願いしますJiheL

4

1 に答える 1

5

まず、JSONデータ内にHTMLフラグメントを配置しないことをお勧めします。カスタムフォーマッタを使用して、グリッドセル内にチェックボックスを含めることができます。

formatter: function (cellvalue) {
    return "<input type='checkbox' class='itmchk' ><strong>" +
        $.jgrid.htmlEncode(cellvalue) + "</strong>";
}

チェックボックスのチェック/チェック解除を制御するbeforeSelectRowには、グリッドのコールバックを使用できます。jqGridは、内部的clickにイベントをグリッド本体にバインドしました。したがって、イベントバブリングが発生する要素に直接イベントハンドラーは存在しません。これにより、1つのコールバック内のチェックボックスのチェック/チェック解除をキャッチできます。beforeSelectRow内部でbeforeSelectRowは、最初に、制御するチェックボックスをクリックしたかどうかをテストする必要があります。

コールバックbeforeSelectRowには2つのパラメータがあります：rowidとイベントオブジェクト。イベントオブジェクトのプロパティtargetは、ユーザーがクリックしたDOM要素になります。このようなすべてのチェックボックスにカスタムitmchkクラスを追加するため、クリックした要素のクラスを確認するだけで十分です。

次の問題は、 getNodeChildrenのようにTreeGridで動作する多くのjqGridメソッドが入力パラメーターとして持っていることですが、代わりにrecordしかありませんrowid。jqGridは、グリッドのロードされたアイテムをローカルに保存します。したがって、から取得する最も簡単な方法recordは、メソッドrowidを使用するgetLocalRowことです。

結果として、beforeSelectRowコールバックのコードは次のようになります。

beforeSelectRow: function (rowid, e) {
    var $this = $(this),
        isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
        localIdName = $this.jqGrid("getGridParam", "localReader").id,
        localData,
        state,
        setChechedStateOfChildrenItems = function (children) {
            $.each(children, function () {
                $("#" + this[localIdName] + " input.itmchk").prop("checked", state);
                if (!this[isLeafName]) {
                    setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
                }
            });
        };
    if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) {
        state = $(e.target).prop("checked");
        localData = $this.jqGrid("getLocalRow", rowid);
        setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state);
    }
}

子のチェックボックスは、以前にロードされたアイテムでのみオン/オフになることに注意してください。グリッドのデータを一度にロードしてloaded: trueプロパティを使用するので、問題はありません。

対応するデモは、上記のコードが実際に機能することを示しています。これは、前の質問に答えて作成したデモの変更です。

于 2013-03-07T07:18:43.460 に答える