Dropdown-Taste in bootstrap-table.js

Ich verwende die "bootstrap-table.js", um meine Daten aufzulisten/anzeigen.Dropdown-Taste in bootstrap-table.js

Für jede Zeile, ich möchte eine Dropdown-Liste mit einigen verwandten Datensatzoptionen anzeigen.

Aber wenn ich das Dropdown in die Zelle einfügen, werden die Optionen in der Tabelle in einer seltsamen Weise angezeigt.

Ich möchte wirklich wissen, wenn möglich ist, zeigen Sie die Dropdown-Optionen aus der Tabelle schweben.

<!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>

Das Ergebnis dieses Codes ist:

Wenn der Benutzer klicken Sie auf der Dropbox, haben wir folgendes Ergebnis:

Aber das gewünschte Ergebnis sind folgende:

Wie kann ich das erreichen?

Quelle

2016-05-02 Julio Schurt

Sie müssen Dropdown-Menü Körper durch Lösen hängen und wieder hängen Sie ihn an den Körper mit dieser Funktion:

(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>

Quelle

2016-05-02 22:22:37

PERFEKTE Lösung Schattig !!!! Danke vielmals!!! –

@JulioSchurt Gern helfen wir Ihnen weiter! –

Dropdown-Taste in bootstrap-table.js

Antwort

Verwandte Themen