Выпадающая кнопка внутри bootstrap-table.js

Я использую «bootstrap-table.js» для отображения/отображения моих данных.Выпадающая кнопка внутри bootstrap-table.js

Для каждой строки я хочу показать выпадающий список с некоторыми связанными параметрами записи.

Но, когда я помещаю выпадающее меню внутри ячейки, параметры отображаются внутри таблицы странным образом.

Я действительно знаю, что если возможно, вы увидите варианты выпадающего меню из таблицы.

<!DOCTYPE html> 
<html> 
<head> 

    <link rel="stylesheet" href="/Content/bootstrap-table.css" /> 
    <link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 

    <table id="table" data-classes="table table-hover table-condensed" data-toggle="table" data-show-columns="true" data-height="250"> 

     <thead> 
      <tr> 
       <th data-field="id">Item ID</th> 
       <th data-field="name">Item Name</th> 
       <th data-field="price">Item Price</th> 
       <th data-formatter="dataFormater" data-width="90">-</th> 
      </tr> 

     </thead> 

     <tbody> 

      <tr> 
       <td>1</td> 
       <td>Item 1</td> 
       <td>$1</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Item 2</td> 
       <td>$2</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Item 3</td> 
       <td>$3</td> 
       <td></td> 
      </tr> 

     </tbody> 

    </table> 

<script src="/Scripts/jquery-2.1.1.min.js"></script> 
<script src="/Scripts/bootstrap.min.js"></script> 
<script src="/Scripts/bootstrap-table.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    function dataFormater(value, row, index) { 

     var id = row.id; 

     var strHTML = "<div class='btn-group' astyle='position: absolute'><button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'>Options<span class='caret'></span></button><ul class='dropdown-menu text-left' role='menu' style='position:absolute'>"; 
     strHTML += "<li><a href='/Edit/" + id + "'><span class='glyphicon glyphicon-edit'></span>&nbsp;&nbsp;Edit</a></li>"; 
     strHTML += "<li><a href='/Delete/" + id + "'><span class='glyphicon glyphicon-remove'></span>&nbsp;&nbsp;Remove</a></li>"; 
     strHTML += "</ul></div>"; 

     var valReturn = strHTML; 

     return valReturn; 
    } 

</script> 

</body> 
</html>

Результат этого кода:

Когда пользователь нажимает на раздаточной, мы имеем следующий результат:

Но желаемый результат:

Как я могу это достичь?

источник

2016-05-02 Julio Schurt

Вы должны добавить выпадающее меню Body, отделив его и повторно добавить его к корпусу с помощью этой функции:

(function() { 
var dropdownMenu; 
$(window).on('show.bs.dropdown', function (e) { 
    dropdownMenu = $(e.target).find('.dropdown-menu'); 
    $('body').append(dropdownMenu.detach()); 
    var eOffset = $(e.target).offset(); 
    dropdownMenu.css({ 
     'display': 'block', 
     'top': eOffset.top + $(e.target).outerHeight(), 
     'left': eOffset.left 
    }); 
}); 
$(window).on('hide.bs.dropdown', function (e) { 
    $(e.target).append(dropdownMenu.detach()); 
    dropdownMenu.hide(); 
}); 
})();

(function() { 
 
    var dropdownMenu; 
 
    $(window).on('show.bs.dropdown', function (e) { 
 
     dropdownMenu = $(e.target).find('.dropdown-menu'); 
 
     $('body').append(dropdownMenu.detach()); 
 
     var eOffset = $(e.target).offset(); 
 
     dropdownMenu.css({ 
 
      'display': 'block', 
 
      'top': eOffset.top + $(e.target).outerHeight(), 
 
      'left': eOffset.left 
 
     }); 
 
    }); 
 
    $(window).on('hide.bs.dropdown', function (e) { 
 
     $(e.target).append(dropdownMenu.detach()); 
 
     dropdownMenu.hide(); 
 
    }); 
 
})(); 
 

 
function dataFormater(value, row, index) { 
 
    var id = row.id; 
 
    var strHTML = "<div class='btn-group' astyle='position: absolute'><button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'>Options<span class='caret'></span></button><ul class='dropdown-menu text-left' role='menu' style='position:absolute'>"; 
 
     strHTML += "<li><a href='/Edit/" + id + "'><span class='glyphicon glyphicon-edit'></span>&nbsp;&nbsp;Edit</a></li>"; 
 
     strHTML += "<li><a href='/Delete/" + id + "'><span class='glyphicon glyphicon-remove'></span>&nbsp;&nbsp;Remove</a></li>"; 
 
     strHTML += "</ul></div>"; 
 

 
    var valReturn = strHTML; 
 
    return valReturn; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<table id="table" data-classes="table table-hover table-condensed" data-toggle="table" data-show-columns="true" data-height="250"> 
 
    <thead> 
 
     <tr> 
 
      <th data-field="id">Item ID</th> 
 
      <th data-field="name">Item Name</th> 
 
      <th data-field="price">Item Price</th> 
 
      <th data-formatter="dataFormater" data-width="90">-</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>Item 1</td> 
 
      <td>$1</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>Item 2</td> 
 
      <td>$2</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>Item 3</td> 
 
      <td>$3</td> 
 
      <td></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

источник

2016-05-02 22:22:37

СОВЕРШЕННОЕ решение Shady !!!! Большое спасибо!!! –

@JulioSchurt Добро пожаловать, рад помочь вам! –

Выпадающая кнопка внутри bootstrap-table.js

ответ

Смежные вопросы