3

jqGrid行の列にブートストラップドロップダウンボタンを追加しようとしていますが、ユーザーがボタンの下矢印をクリックしてオプションを表示すると、オプションがグリッドの次の行の後ろに隠れます。

zIndex を設定しようとしましたが、うまくいきませんでした。

提案してください。

解決済み:

この問題は、jqGrid css ".ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv" をオーバーライドしてオーバーフロー: 可視にすることで修正されました。

4

2 に答える 2

2

あなたの質問はこれに似ています https://stackoverflow.com/a/11067115/1416911

ドロップダウンのオーバーフローの問題に対処するための解決策がいくつかあります (報奨金のおかげです)。

特に@ScottSの回答を見てください。

于 2012-06-22T17:24:05.470 に答える
0

次のようにして、これを機能させました。

  1. 列モデルにクラス参照を追加する

{ name: 'edit', search: false, width: 90, align: 'center', sortable: false, classes: "bootstrap_dropdown" },

  1. bootstrap_dropdown css を追加します。

    <style>
td.bootstrap_dropdown {
    overflow:visible !important;
    white-space: normal !important;
}

  2. ui.jqgrid.cssを編集し、「 .ui-jqgrid .ui-jqgrid-bdiv」要素を変更します

    .ui-jqgrid .ui-jqgrid-bdiv {位置: 相対; マージン: 0; パディング:0; オーバーフロー: 見える!重要; テキスト揃え:左; }

  3. 行にドロップダウンを追加します

            gridComplete: function () {
        var rows = $("#grid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {

            // code here 

            var edit = " ";
            edit = edit + "<div class='btn-group'>";
            edit = edit + "  <button type='button'  onclick=\"viewmodal.showEditPage('#grid'," + rows[i] + ");\" class='btn btn-primary  btn-xs'><i class='fa fa-pencil-square-o lg'></i> Edit</button>";
            edit = edit + "  <button type='button' class='btn btn-primary  btn-xs dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>";
            edit = edit + "    <span class='caret'></span>";
            edit = edit + "    <span class='sr-only'>Toggle Dropdown</span>";
            edit = edit + "  </button>";
            edit = edit + "  <ul class='dropdown-menu' role='menu'>";
            edit = edit + "    <li><a href='#' onclick=\"viewmodal.showUploadPage('#grid'," + rows[i] + "); return false;\"><i class='fa fa-upload lg'></i> Upload images</a></li>";
            edit = edit + "    <li class='divider'></li>";
            edit = edit + "    <li><a href='#' onclick=\"window.open('" + link + "','','');\"><i class='fa fa-search lg'></i> Preview web</a></li>";
            edit = edit + "    <li><a href='#'><i class='fa fa-search lg'></i> Preview mobi</a></li>";
            edit = edit + "  </ul>";
            edit = edit + "</div>";

            // Add buttons to 'edit' column
            $("#grid").jqGrid('setRowData', rows[i], { edit: edit });

            // more code here
        };  
    }
于 2015-03-26T04:24:24.247 に答える