Question

我正在尝试在jqGrid行的列中添加bootstrap下拉按钮，但是当用户单击按钮中的向下箭头以查看选项时，选项将隐藏在网格的下一行后面。

尝试过设置zIndex但没有效果。

请建议。

解决：

通过覆盖jqGrid css“.ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv”来解决问题以使其溢出：可见

Answer 1

您的问题与https://stackoverflow.com/a/11067115/1416911

类似

有几种解决方案（感谢赏金）来处理下拉式溢出问题。

特别关注@ScottS答案。

Answer 2

通过执行以下操作实现此目的：

向列模型添加类引用

{name：'edit'，search：false，width：90，align：'center'，sortable：false， classes：“bootstrap_dropdown”}，

添加bootstrap_dropdown css

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

编辑 ui.jqgrid.css ，然后更改“.ui-jqgrid .ui-jqgrid-bdiv”元素

.ui-jqgrid .ui-jqgrid-bdiv {position：relative; 保证金：0; 填充：0; 溢出：可见！重要; 文本对齐：左; }

将下拉列表添加到行

        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
        };  
    }

jqGrid行中的Twitter Bootstrap按钮下拉列表

2 个答案: