web-dev-qa-db-ja.com

jqgrid：複数選択およびチェックの無効化（条件付き）


私はjqGridが大好きですが、物事は本来あるべきものよりも複雑に見えることがあります。
達成したいことは、各行にチェックボックスを付けて、ユーザーが送信/処理される行を選択できるようにすることです。
ただし、一部のチェックボックスをブロックして、ユーザーにその特定の行に対する権限がない可能性があります。

_multiselect: true_を設定して、チェックボックスを非表示にしようとしました：

_loadComplete: function (data) {
    if (data.rows.length > 0) {
        for (var i = 0; i < data.rows.length; i++) {
            if (data.rows[i].cell[7] == 'false') {
                $("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden");
            }
        }
    }
},
_

そしてそれはうまく機能しますが、チェックされていなくても、.jqGrid('getGridParam', 'selarrrow')は選択された行を提供します。
チェックボックスを有効/無効にする他の方法と、チェックされているチェックボックスを確認する方法はありますか？

ありがとう

jqueryjqgrid
18
LeftyX

「無効」属性に関して、選択可能からチェックボックスをいくつか無効にすることをお勧めします。完全に実装するには、次のものが必要です。

  1. loadCompleteイベントハンドル内で「無効」に設定
  2. さらに、beforeSelectRowイベントハンドル内の無効な行の選択を防ぎます
  3. 複数選択列のヘッダーにある「すべて選択」チェックボックスをサポートするには、無効な行の選択を修正するonSelectAllイベントハンドルを実装します。

対応するデモを見ることができます ここ 。コードの最も重要な部分はここにあります：

var grid = $("#list10"), i;
grid.jqGrid({
    //...
    loadComplete: function() {
        // we make all even rows "protected", so that will be not selectable
        var cbs = $("tr.jqgrow > td > input.cbox:even", grid[0]);
        cbs.attr("disabled", "disabled");
    },
    beforeSelectRow: function(rowid, e) {
        var cbsdis = $("tr#"+rowid+".jqgrow > td > input.cbox:disabled", grid[0]);
        if (cbsdis.length === 0) {
            return true;    // allow select the row
        } else {
            return false;   // not allow select the row
        }
    },
    onSelectAll: function(aRowids,status) {
        if (status) {
            // uncheck "protected" rows
            var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
            cbs.removeAttr("checked");

            //modify the selarrrow parameter
            grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
                .map(function() { return this.id; }) // convert to set of ids
                .get(); // convert to instance of Array
        }
    }
);

更新：無料のjqGrid はhasMultiselectCheckBoxコールバックをサポートします。これは、すべての行ではなく複数選択チェックボックスを作成するために使用できますjqGridの。 rowattrを使用して、いくつかの行をさらに無効にすることができます。その結果、上記の機能がより簡単な方法で得られます。ローカルデータ（multiPageSelection: trueまたはdatatype: "local"）を含む無料のjqGridの場合は、loadonce: trueオプションを追加で使用することをお勧めします。オプションmultiPageSelection: trueは、ページング時に配列selarrrowを保持します。対応するIDをin selarrrowに入力することにより、一部の行を「事前選択」できます。 [〜＃〜] updated [〜＃〜]the answer および the answer の一部を参照してください=追加情報については デモ を使用します。

31
Oleg

Olegからの素晴らしい回答です。無効な行の選択を解除するコードも追加します。以下のonSelectAll関数を完成させます。

onSelectAll: function(aRowids,status) {
    if (status) {
        // uncheck "protected" rows
        var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
        cbs.removeAttr("checked");

        //modify the selarrrow parameter
        grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
            .map(function() { return this.id; }) // convert to set of ids
            .get(); // convert to instance of Array

        //deselect disabled rows
        grid.find("tr.jqgrow:has(td > input.cbox:disabled)")
            .attr('aria-selected', 'false')
            .removeClass('ui-state-highlight');
    }
}
5
Sergio Espallargas

回避策を見つけました。 loadCompleteイベントの実行中に、[すべて選択]チェックボックスを無効にします。必要ありません。また、チェックボックスを非表示にして無効にします。

loadComplete: function (data) {
    $("#cb_OrdersGrid").css("visibility", "hidden");
    if (data.rows.length > 0) {
        for (var i = 0; i < data.rows.length; i++) {
            if (data.rows[i].cell[7] == 'false') {
                $("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden");
                $("#jqg_OrdersGrid_" + data.rows[i].id).attr("disabled", true);
            }
        }
    }
}

次に、データを送信するときに、選択した行をループして、それらが無効になっているかどうかを確認し、有効になっている行を新しい配列に配置します。

var selectedRows = myGrid.jqGrid('getGridParam', 'selarrrow');
var checkedRows = [];
var selectionLoop = 0;
for (var x = 0; x < selectedRows.length; x++) {
    var isDisabled = $('#jqg_OrdersGrid_' + selectedRows[x]).is(':disabled');
    if (!isDisabled) {
        checkedRows[selectionLoop] = selectedRows[x];
        selectionLoop++;
    }
}

私が今達成したことは、条件付きで行をチェックできるかどうかを条件付きで選択できることです。
コードが最適化されていないことはわかっていますが（Olegは許してください）、後でそれを行います。

3
LeftyX

Googleで検索した結果、この回答に終わった（私のような）人々にとって、jqGrid 4.0.0以降、この問題に対する非常に簡単な解決策があります。

選択したくない行にcss-class 'ui-state-disabled'を追加するだけで十分です。 jqGrid 4.0.0の変更ログ を参照してください。また、チェックボックスの非表示または無効化と組み合わせることもできます。

    var $jqgrid = $("#jqgridselector");         
    //loop through all rows
    $(".jqgrow", $jqgrid).each(function (index, row) {
        var $row = $(row);
        if ($row === condition) {
            //Find the checkbox of the row and set it disabled
            $row.find("input:checkbox").attr("disabled", "disabled");
            //add class ui-state-disabled, because thats how jqGrid knows not to take them into account for selection
            $row.addClass("ui-state-disabled");
            //I overwrite the opactity of the ui-state-disabled class to make the row look 'normal'
            $row.css("opacity", 1);
            }
        });
3
cverb

私はjqGrid 4.4.4を使用していますが、LetfyX loadCompleteを少し調整する必要がありました。

            loadComplete: function(data) {
                for (var i = 0; i < data.rows.length; i++) {
                    var rowData = data.rows[i];
                    if (rowData.cell[6] != null) {//update this to have your own check
                        var checkbox = $("#jqg_list_" + rowData.i);//update this with your own grid name
                        checkbox.css("visibility", "hidden");
                        checkbox.attr("disabled", true);
                    }
                }
            }
2
jhilden