Bootstrap-Tabelle Kontrollkästchen werden auf Seite Belastung geprüft

I bootstrap-table verwenden und ich versuche, Kontrollkästchen einzurichten, ist das Problem, dass die Kontrollkästchen initiiert werden als ohne besonderen Grund geprüftBootstrap-Tabelle Kontrollkästchen werden auf Seite Belastung geprüft

<html> 
 

 
    <head> 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
     <meta name="robots" content="noindex, nofollow"> 
 
     <meta name="googlebot" content="noindex, nofollow"> 
 
     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
 
     <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
     <link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"> 
 
     <script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 
     <title>Bootstrap Table</title> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading">why checked?</div> 
 

 
     <div class="panel-body"> 
 
      <table data-row-style="rowStyle" data-toggle="table" data-click-to-select="true"> 
 
      <thead> 
 
       <th data-field="dd" data-checkbox="true"> 
 
       </th> 
 
       <th data-sortable="true"> 
 
       x 
 
       </th> 
 
       <th data-sortable="true"> 
 
       y 
 
       </th> 
 
       <th data-sortable="true"> 
 
       z 
 
       </th> 
 
       <th data-sortable="true"> 
 
       t 
 
       </th> 
 
       <th data-sortable="true"> 
 
       r 
 
       </th> 
 
       <th data-sortable="true"> 
 
       m 
 
       </th> 
 
       <th></th> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td> 
 
       </td> 
 
       <td> 1</td> 
 
       <td>2</td> 
 
       <td>3</td> 
 
       <td> 4</td> 
 
       <td> 5</td> 
 
       <td><span class="label label-default">xxx</span></td> 
 
       <td> 
 
        <div class="form-inline text-right"> 
 
        <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post"> 
 
         <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button> 
 
        </form> 
 
        <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post"> 
 
         <input name="_method" type="hidden" value="DELETE"> 
 
         <input type="hidden" name="_token" value="{{csrf_token()}}"> 
 
         <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button> 
 
        </form> 
 
        </div> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
     </div> 
 
    </body> 
 
    </html>

Demo: http://jsfiddle.net/e3nk137y/12160/

Zweite Frage, wie kann ich einen Namen und einen Wert für die Kontrollkästchen fügen Sie, ich habe versucht, von einemWert/benutzerdefiniertes Attribut zurückzukehrenFunktion aber nicht sehen, jede Veränderung in dem Entwickler-Tool

Die Dokumentation erwähnt keine Attribute/Funktion/Ereignis thouse Kontrollkästchen

aktualisiert es scheint anpassen, dass, wenn Sie möchten, die sortieren ausgewählte Elemente die erste Spalte (Checkbox-Spalte) verschwindet

Quelle

2017-03-06 madalinivascu

Es ist eigentlich ziemlich lustig zu sehen, wie die Bootstrap-Tabelle zusammenbricht, wenn sie Leerzeichen in ihren Tabellenzellen findet. Sobald sie von Leerraumzeichen einschließlich Zeilenumbrüchen abgeschnitten sind, scheinen die Probleme von selbst gelöst zu sein.

function check() { 
 
    $("tbody input:checked").each(function() { 
 
    console.log($(this).parents("tr:first").data("val")); 
 
    }); 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"> 
 
<script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 
<div class="container"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="panel panel-primary"> 
 
      <div class="panel-heading">why checked?</div> 
 
      <div class="panel-body"> 
 
      <button onclick="check()">Check Values</button> 
 
      <table data-row-style="rowStyle" data-toggle="table" data-click-to-select="true"> 
 
       <thead> 
 
       <th data-field="dd" data-checkbox="true"> 
 
       </th> 
 
       <th data-sortable="true"> 
 
        x 
 
       </th> 
 
       <th data-sortable="true"> 
 
        y 
 
       </th> 
 
       <th data-sortable="true"> 
 
        z 
 
       </th> 
 
       <th data-sortable="true"> 
 
        t 
 
       </th> 
 
       <th data-sortable="true"> 
 
        r 
 
       </th> 
 
       <th data-sortable="true"> 
 
        m 
 
       </th> 
 
       <th></th> 
 
       </thead> 
 
       <tbody> 
 
       <tr data-val="100"> 
 
        <td></td> 
 
        <td>100</td> 
 
        <td>200</td> 
 
        <td>300</td> 
 
        <td>400</td> 
 
        <td>500</td> 
 
        <td><span class="label label-default">xxx</span></td> 
 
        <td> 
 
        <div class="form-inline text-right"> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post"> 
 
         <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button> 
 
         </form> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post"> 
 
         <input name="_method" type="hidden" value="DELETE"> 
 
         <input type="hidden" name="_token" value="{{csrf_token()}}"> 
 
         <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button> 
 
         </form> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
       <tr data-val="200"> 
 
        <td></td> 
 
        <td>200</td> 
 
        <td>200</td> 
 
        <td>300</td> 
 
        <td>400</td> 
 
        <td>500</td> 
 
        <td><span class="label label-default">xxx</span></td> 
 
        <td> 
 
        <div class="form-inline text-right"> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post"> 
 
         <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button> 
 
         </form> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post"> 
 
         <input name="_method" type="hidden" value="DELETE"> 
 
         <input type="hidden" name="_token" value="{{csrf_token()}}"> 
 
         <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button> 
 
         </form> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
       <tr data-val="300"> 
 
        <td></td> 
 
        <td>300</td> 
 
        <td>200</td> 
 
        <td>300</td> 
 
        <td>400</td> 
 
        <td>500</td> 
 
        <td><span class="label label-default">xxx</span></td> 
 
        <td> 
 
        <div class="form-inline text-right"> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post"> 
 
         <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button> 
 
         </form> 
 
         <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post"> 
 
         <input name="_method" type="hidden" value="DELETE"> 
 
         <input type="hidden" name="_token" value="{{csrf_token()}}"> 
 
         <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button> 
 
         </form> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

I haben in jeder Reihe Daten-val hinzugefügt und Funktion check() werden die Werte der ausgewählten Zeilen einzuloggen.

Quelle

2017-03-07 09:50:01

Ich brauche keine Indizes Ich brauche Kontrollkästchen Werte, nicht Zeile Index, gerade jetzt diese Kontrollkästchen nicht tun, was sie tun sollen, dass Daten vom Client an den Server – madalinivascu

guten Fang auf den weißen Räumen zu senden ist – madalinivascu

@madalinivascu Ich habe das Snippet aktualisiert, um die Werte der ausgewählten Zeile anzuzeigen. Aktivieren Sie alle Kontrollkästchen und klicken Sie auf die Schaltfläche vor der Tabelle, um die Werte der ausgewählten Zeilen anzuzeigen. –

Bootstrap-Tabelle Kontrollkästchen werden auf Seite Belastung geprüft

Antwort

Verwandte Themen