флажки bootstrap-table проверяются при загрузке страницы

Я использую bootstrap-table и пытаюсь установить флажки, проблема заключается в том, что флажки инициируются как отмеченные без особой причины

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

демонстрация: http://jsfiddle.net/e3nk137y/12160/

Второй вопрос, как добавить имя и значение в флажки, я пытался вернуть значение/пользовательский атрибут из функции data-formatter, но не видел никаких изменений в инструменте разработчика

В документации не упоминается какой-либо атрибут/функция/событие для настройки флажков дома.

Обновить кажется, что если вы хотите отсортировать выбранные элементы, первый столбец (столбец флажка) исчезнет


javascript jquery bootstrap-table
person madalinivascu    schedule 06.03.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

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>

Я добавил data-val в каждую строку, и функция check() будет регистрировать значения выбранных строк.

person Kiran Shakya    schedule 07.03.2017
comment
мне не нужны индексы, мне нужны значения флажков, а не индекс строки, прямо сейчас эти флажки не делают того, что они должны делать, а именно отправлять данные от клиента на сервер - person madalinivascu; 07.03.2017
comment
@madalinivascu Я обновил фрагмент, чтобы показать значения выбранной строки. установите любые флажки и нажмите кнопку перед таблицей, чтобы увидеть значения выбранных строк. - person Kiran Shakya; 07.03.2017
comment
поэтому, чтобы завершить это, мне понадобится скрытое поле ввода, чтобы собрать все значения настраиваемых атрибутов и использовать его в качестве ввода для моей формы. - person madalinivascu; 07.03.2017

arrow_upward
0
arrow_downward

Это сработало для меня (снимите все страницы):

<script>
        var $table = $('#search-result');

        $(function () {
              $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination')
        });

 </script>

person Silvia Patteet    schedule 23.10.2019

arrow_upward
0
arrow_downward

Я знаю, что это действительно старо, но я столкнулся с той же проблемой, и ответы выше не помогли. Я наконец-то разобрался со своей проблемой, поэтому хотел опубликовать ее здесь на случай, если кто-то еще найдет эту проблему с помощью поиска Google (или, если вы все еще ищете ответ и просто снимаете флажки с помощью jquery)

Для вашего кода выше ваше поле флажка также связано с полем данных.

<th data-field="dd" data-checkbox="true">
</th>

Если данные, которые вы заполните позже, имеют значение для столбца dd, оно будет установлено как true в соответствии с документация:

Если задано значение, флажок автоматически устанавливается. Также можно установить/снять флажок с помощью средства форматирования (верните true, чтобы проверить, верните false, чтобы снять флажок).

Поэтому простое удаление data-field="dd" может решить проблему.

В какой-то момент это изменилось в разных версиях bootstrap-table. Я обновился с 1.9.0 до 1.18.3, поэтому я не уверен, когда именно, но удаление атрибута data-field из <th>, у которого был атрибут data-checkbox, устранило мою проблему, и он больше не помечал его как проверенный при загрузке страницы.

person Anne W.    schedule 12.05.2021