1

CSS とprettyCheckableでカスタマイズした複数選択チェックボックスを持つjqGridテーブルがあります。

テーブルのすべてのチェックボックスをカスタマイズするには、次のように設定.prettyCheckable()します。

jQuery(document).ready(function($){
    $("input[type=checkbox]").change(function() {
        $(this).triggerHandler("click");
    }).prettyCheckable();
});

しかし、これは機能しません。最初のチェックボックスだけがスタイルを持っています。

jqGrid

.prettyCheckable()だから私は関数をjqGridloadCompleteに挿入しようとし、 Oleg #hereで提案されているように、チェックされたクラスを追加して <a>

これは私のjqGrid設定です:

$(document).ready(function() {
     $('#searchForm').ajaxForm(function() {
        var _data = $('#searchForm').serialize();
        $('#ResultsTable').jqGrid().setGridParam({
            url: '${searchUrl}' + _data,
            loadComplete: function () {
                $(this).find("input.cbox").prettyCheckable();
            }
        }).trigger("reloadGrid")
        return true;
    });
    jsonTable('ResultsTable', 'ResultsPager', '${searchUrl}', 'searchForm',
        {id: 'code'},
        ['Code', 'Description', 'CF'],
        [{name: 'code', index: 'code', width: 55},
        {name: 'description', index: 'description', width: 90},
        {name: 'CF', index: 'CF', width: 80},
        function(id) {
            var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
            $('#edit').toggle(selRows.length == 1);
            $('#delete').toggle(selRows.length > 0);
            $('#editForm #code').val(selRows);
            $('#deleteForm #code').val(selRows);
            //$("#jqg_" + $.jgrid.jqID(this.id + "_" + id)).next("a").toggleClass('checked');
        },
        function(aSel, selected) {
            $('#edit').toggle(false);
            $('#delete').toggle(selected);
            if (selected) {
                $('#editForm #code').val(selRows);
                $('#deleteForm #code').val(selRows);
            }
        },
        true
    )      
});

しかし、これでもうまくいきません。どうすればこの問題を解決できますか?


ここに小さなデモを作成しました: jsfiddle.net/LStvX/1

4

1 に答える 1

2

まず第一に、jqGrid での他のプラグインの統合が興味深いと思います。以前はprettyCheckableを使用していませんでした。どのように機能するかを同じように分析した後、そのような統合の例を示すデモprettyCheckableを作成しました。結果は下の写真のようになります

ここに画像の説明を入力

コードを理解するprettyCheckableには、セルの元の HTML フラグメントを複数選択チェックボックスで変換することを理解する必要があります

ここに画像の説明を入力

より複雑な構造で

ここに画像の説明を入力

列の高さを増やすprettyCheckable空の要素を常に作成するのは良くありません。<label>そこで、すべての<label>要素を非表示にするコードを追加しました。

次の問題は、チェックボックスにオプションのクラスを持つ要素をprettyCheckable使用し、イベントごとに元のチェックボックス (初期化後に非表示になる) を通知することですが、jqGrid は行またはチェックボックスでイベントを待機し、イベントに反応しません。<a>"checked"prettyCheckablechangeclickchange

ここでは、あまり面白くない技術的な詳細をスキップします。以下に示すデモのコードの最も重要な部分

$("#list").jqGrid({
    ...
    multiselect: true,
    multiselectWidth: 28,
    onSelectAll: function (aRowids, status) {
        var i, l = aRowids.length, $a,
            selector = "#jqg_" + $.jgrid.jqID(this.id) + "_";

        for (i = 0; i < l; i++) {
            $a = $(selector + $.jgrid.jqID(aRowids[i])).next("a");
            if (status) {
                $a.addClass("checked");
            } else {
                $a.removeClass("checked");
            }
        }
    },
    beforeSelectRow: function (rowid, e) {
        if (e.target.nodeName.toUpperCase() === "A" &&
                $(e.target).prev("input").hasClass("cbox")) {
            $(e.target).prev("input").click();
        }
        return true;
    },
    onSelectRow: function (rowid, state) {
        var $a = $("#jqg_" + $.jgrid.jqID(this.id + "_" + rowid)).next("a");
        if (state) {
            $a.addClass("checked");
        } else {
            $a.removeClass("checked");
        }
    },
    loadComplete: function () {
        var $checkboxes = $(this).find("input.cbox");
        $checkboxes.prettyCheckable();
        $checkboxes.siblings("label").hide();
    }
});
$("#cb_" + $.jgrid.jqID($grid[0].id)).change(function() {
    $(this).triggerHandler("click");
}).prettyCheckable();
$("#cb_" + $.jgrid.jqID($grid[0].id)).siblings("label").hide();

追加の CSS 設定 (回答を参照) を使用して、列ヘッダーの高さを増やしました

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
}
于 2013-06-19T15:26:33.543 に答える