jquery - jqGrid 行中的 Twitter Bootstrap 按钮下拉菜单

Question

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

已尝试设置 zIndex 但没有奏效。

请建议。

---

解决了：

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

Answer 1

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

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

特别看看@ScottS 的回答。

Answer 2

通过执行以下操作使此工作：

1. 添加对列模型的类引用

{名称：“编辑”，搜索：假，宽度：90，对齐：“中心”，可排序：假，类：“bootstrap_dropdown” }，

2. 添加 bootstrap_dropdown css

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

3. 编辑ui.jqgrid.css，并更改 " .ui-jqgrid .ui-jqgrid-bdiv" 元素

   .ui-jqgrid .ui-jqgrid-bdiv {位置：相对；边距：0；填充：0； 溢出：可见！重要； 文本对齐：左；}

4. 将下拉列表添加到行

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