jqGrid 行中的 Twitter Bootstrap 按钮下拉菜单答案

【问题标题】：Twitter Bootstrap Button Dropdown in jqGrid rowjqGrid 行中的 Twitter Bootstrap 按钮下拉菜单
【发布时间】：2012-06-22 09:46:30
【问题描述】：

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

已尝试设置 zIndex，但没有成功。

请提出建议。

已解决：

问题已通过覆盖 jqGrid css ".ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv" 来解决溢出：可见

【问题讨论】：

我只是在 jqGrid 的列格式化程序中使用了twitter.github.com/bootstrap/components.html#buttonDropdowns 上指定的下拉按钮。对我来说没什么特别的。
我知道不要打开旧问题，但链接已失效，需要知道用于包含按钮的代码是什么。 @araaku 请您发布您的代码吗？非常感谢！

标签： jquery jqgrid twitter-bootstrap

【解决方案1】：

你的问题看起来和这个https://stackoverflow.com/a/11067115/1416911类似

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

特别看@ScottS 的回答。

【讨论】：

【解决方案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 {位置：相对；边距：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
        };  
    }

【讨论】：