web-dev-qa-db-ja.com

列をチェックボックスにする

データベースリクエストを使用してグリッドをロードします（PHP with CodeIgniter abd jqgrid helper）。データを含むNiceグリッドを表示するのに問題はありません。

1つまたは複数の行を選択するために、チェックボックス付きの新しい列を表示したいと思います。

ロード後に新しい列を追加することはできません。だから私はこのようにしようとしています：-グリッドを作成するときに列が追加されます-作成時に関数を使用して 'loadComplete'オプションを追加します-表示時に関数が実行されますここにあります ：

function ajoutCheckBox() {
    var grille = $("#users_grid");

    // Construire les checkbox dans la colonne D
    grille.setColProp('Dest', {editable: true});
    grille.setColProp('Dest', {edittype: 'checkbox'});
    grille.setColProp('Dest', {editoptions: { value: "True:False" }});
    grille.setColProp('Dest', {formatter: "checkbox"});
    grille.setColProp('Dest', {formatoptions: { disabled: true}});



    // Insérer la valeur false dans toutes les lignes de la colonne D
    var index   = grille.jqGrid('getGridParam', '_index');

    for(i in index) {
        grille.jqGrid('setCell', i, 'Dest', 'False', {});
    }
}

ご覧のとおり、グリスは「#users_grid」と呼ばれ、列は「Dest」と呼ばれます。

私の問題：何も追加されません...

ご協力ありがとうございました ！

XB

編集：私は次の解決策を見つけました：

  • チェックボックスの列がcolModelステートメントに追加されます。
  • 値を初期化し、チェックボックスをアクティブにするには（作成時に無効になります！）、"loadComplete"コールバック関数を使用します。

コードは非常に単純ですが、私が見つけるのは難しいです...

グリッドの作成：

loadComplete: function() { ajoutCheckBox() },
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\",  defaultValue: \"False\" }}","size":10}}, ....]

コールバック関数：

function ajoutCheckBox() {
    var grille = $("#users_grid");
    var index = grille.jqGrid('getGridParam', '_index');

    for(i in index) { // Pour toutes les lignes du tableau
        grille.jqGrid('setCell', i, 'Env', 'False');
        $('#'+i).find("input:checkbox").removeAttr('disabled');
    }
}

最適化されていないようですが、機能します。

checkboxjqgrid
6
Albiréo

ロード後に新しい列を追加することは不可能ではありませんが、非表示の列を表示することは可能です。チェックボックスのある列を定義するだけで（必要に応じてformatoptions: { disabled: false}を使用できます）、showColコールバック内でloadCompleteを使用して、必要に応じて列を表示するか、強制することができますhideColメソッドを使用して非表示にします。

[〜＃〜]更新[〜＃〜]:(コメントでの議論の後）あなたが望むものを正しく理解していれば デモ は解決策を示す必要があります：

  • デモでは、入力データに基づいて（すべての行に存在するブール値に基づいて）チェックボックス付きの列が作成されます。完全な入力データは、jqGridによって内部パラメーターdataおよび_indexに自動的に保存されます。データの最初のページが表示されます。
  • デモでは、beforeSelectRowを使用して、チェックボックスのクリック/チェック/チェック解除を処理します。 datatype: "local"はjqGridで使用されているため、getLocalRowを使用して、行のデータを表す内部オブジェクトにアクセスしました。チェックボックスのオン/オフで、データの対応するフィールドを変更しました。その結果、いくつかのチェックボックスの状態を変更し、ページを変更して最初のページに戻ることができます。チェックボックスの変更された状態が保存されたことがわかります。

以下は、コードの最も重要な部分です。

var mydata = [
        ...
        { id: "4", ..., closed: true, ... },
        ....
    ];

$("#list").jqGrid({
    datatype: "local",
    data: mydata,
    colModel: [
        ...
        {name: "closed", width: 70, align: "center",
            formatter: "checkbox", formatoptions: { disabled: false},
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select", searchoptions: { sopt: ["eq", "ne"], 
                value: ":Any;true:Yes;false:No" } },
        ...
    ],
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },

    ...
});
9
Oleg