Детальный вид при использовании загрузочной таблицы не работает - PullRequest
0 голосов
/ 18 января 2019

Я использую библиотеку загрузочных таблиц для работы с jQuery.
Мне нужно показать несколько деталей в каждой строке, у него есть функция для этого. Я проверяю все, но все еще не работает.

Он имеет атрибут должен быть вставлен в:

    data-detail-view="true"
    data-detail-formatter="detailFormatter"

Я копирую и вставляю свой код здесь:

function detailFormatter(index, row) {
  var html = [];
  $.each(row, function(key, value) {
    html.push('<p><b>' + key + ':</b>' + value + '</p>');
  });
  return html.join('');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>



<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
  <thead>
    <tr>
      <th data-field="checkboxselect" data-checkbox="true"></th>
      <th data-field="id" data-width="40" data-halign="center">ID</th>
      <th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
      <th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
      <th data-field="treatmentPrice">Treatment price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td data-halign="center">2</td>
      <td data-searchable="true">Plastic surgery</td>
      <td data-searchable="true">Rhino plasty</td>
      <td>range: $2000 to 3000$</td>
    </tr>
    <tr>
      <td></td>
      <td data-halign="center">2</td>
      <td data-searchable="true">Plastic surgery</td>
      <td data-searchable="true">Lift > Face lift</td>
      <td>range: $2000 to 3000$</td>
    </tr>

  </tbody>
</table>

но это не работает и ничего не меняет в моей таблице, я также обнаружил, что ошибка в моем phpstorm о функции "detailFormatter" не используется на странице, но я использую его так же, как я объяснил выше. мой фактический результат должен быть похож на эту ссылку: Пример

1 Ответ

0 голосов
/ 03 февраля 2019

Я отредактировал ваш код в этой скрипке:

http://jsfiddle.net/eitanmg/bapewft2/2/

Ваш код хорош и предполагается, что он работает. единственная проблема, я думаю, в ваших css и script вверху у вас есть ссылочные URL, которые начинаются с // вместо действующего протокола, такого как http:// или https://.

, поэтому обязательно измените это:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>

к этому:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
...