Как создать загрузочную таблицу со сворачиваемыми строками при сохранении функций сортировки - PullRequest
Новая
       53

Как создать загрузочную таблицу со сворачиваемыми строками при сохранении функций сортировки

0 голосов
/ 22 мая 2019

Я пытаюсь передать данные с сервера sql в таблицу начальной загрузки. Я добавляю эти пользовательские данные построчно, используя метод начальной загрузки ('insertRow'), но я не знаю, как редактировать эти строки, чтобы сделать эти строки свертываемыми, сохраняя при этом функциональность сортировки и фильтрации, учитывая мою таблицу начальной загрузки.

Вот что я пробовал. Я начал с попытки использовать параметр «data-url», который предлагает таблица начальной загрузки, чтобы данные могли быть непосредственно загружены из бэкэнда, а затем использовать параметр data-detail-view, чтобы свернуть определенные строки и показать дополнительную информацию о каждом пользователе. (https://bootstrap -table-examples3.wenzhixin.net.cn / index.html? вид-источник # опции / деталь-view.html ). Однако при попытке использовать опцию data-url были некоторые междоменные ошибки, которые серверная часть не смогла устранить. Поэтому я попытался использовать код, который непосредственно создавал новые строки с использованием JavaScript. Проблема этого метода заключается в том, что при получении информации таблица начальной загрузки, похоже, не знает о новых данных и отображает «Не найдено подходящих записей», даже если в этот момент отображаются строки данных. Следовательно, ни один из вариантов сортировки не работает. Я обнаружил, что с помощью следующего метода таблица собирает информацию и параметры сортировки, такие как поиск, удаление выбранных столбцов и т. Д. 

$('#table').bootstrapTable('insertRow',{
          index: rowId,
          row: data //needs to be json

    });

Однако эта опция, по-видимому, не дает мне гибкости для редактирования атрибутов строк, поэтому я могу добавить свертываемую функциональность для каждой строки, которую я хотел бы.

У меня есть два разных метода, первый использует опцию bootstrapTable ('insertRow'), например: 

function insertRow(userID, name, gender, age, salary, product, date) {
let table = document.getElementById('table-body');
let   rowId= table.getElementsByTagName('tr').length;

let data ={
      id: userID,
      name: name,
      gender: gender,
      age: age,
      salary: salary,
      product: product,
      date: date
    }

    $('#table').bootstrapTable('insertRow',{
          index: rowId,
          row: data //needs to be json

    });
  }

Второй способ - использование простого Javascript, например: 

function insertRowNew(userID, name, gender, age, salary, product, date) {

      let table = document.getElementById('table-body'); 
      let row = table.insertRow(0);
      row.setAttribute('data-toggle', 'collapse');
      row.setAttribute('data-target', `#accordion${userID}`);
      row.setAttribute('class', 'clickable collpase-row collapsed');
      let cellUserID= row.insertCell(0);
      let cellName = row.insertCell(1);
      let cellGender = row.insertCell(2);
      let cellAge = row.insertCell(3);
      let cellSalary = row.insertCell(4);
      let cellProduct = row.insertCell(5);
      let cellTime = row.insertCell(6);

      cellUserID.innerHTML = userID;
      cellName.innerHTML = name;
      cellGender.innerHTML = gender;
      cellAge.innerHTML = age;
      cellSalary.innerHTML = salary;
      cellProduct.innerHTML = product['productName'];
      cellTime.innerHTML = date;

      let newRow = table.insertRow(1);
      myHtmlContent = `<td colspan="7"> \
                           <div id="accordion${userID}" 
                           class="collapse">Hello</div> \
                       </td>`;
      newRow.innerHTML = myHtmlContent;
}

Это дает мне складывающиеся строки, но не дает возможности сортировки и фильтрации таблиц.

HTML-код для таблицы следующий: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">
<!--Script references. -->
  <!--Reference the jQuery library. -->
  <script src="lib/jquery-1.10.2.min.js"></script>
  <!--Reference the SignalR library. -->
  <script src="lib/jquery.signalR-2.4.0.js"></script>
  <!--Reference the autogenerated SignalR hub script. -->
  <script src="lib/hubs.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

 <!-- Template Main Javascript File -->
  <script src="js/main.js"></script>

<!-- Data Table Bootstrap -->
  <link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">

  <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>


  <!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">

</head>

<body id="page-top">
  <div class="wrapper">
<main id="main-management-system">
      <!-- <table width="100%" class="display" id="datatable"> -->
          <section class="container">
                    <h1 style="text-align: center">Customer Connect Dashboard</h1>



                    <table id="table"
                          data-classes= "table table-bordered table-hover table-striped"
                          data-sortable="true"
                          data-toggle="table"
                          data-show-columns="true"
                          data-search="true"
                          data-pagination="true"
                          data-show-toggle="true"
                          data-show-fullscreen="true"
                          data-sort-name="date"
                          data-sort-order="asc"

                          >

                                <thead class="thead-dark">
                                        <tr style="width: 100%">
                                                <th data-sortable="true" data-field="id">User ID</th>
                                                <th data-sortable="true" data-field="name" >Name</th>
                                                <th data-sortable="true" data-field="gender">Gender</th>
                                                <th data-sortable="true" data-field="age">Age</th>
                                                <th data-sortable="true" data-field="salary">Salary (£)</th>
                                                <th data-sortable="true" data-field="product">Product</th>
                                                <th data-sorter="dateSorter" data-sortable="true" data-field="date">Date</th>
                                        </tr>
                                    </thead>

                                    <tbody id="table-body">

                                    </tbody>

                          </table>
</section>
</main>
 </div>



</body>
</html>

Я хотел бы иметь возможность использовать метод $ ('# table'). BootstrapTable ('insertRow'), чтобы я мог поддерживать возможности сортировки и фильтрации и возможность редактировать эти строки, чтобы сделать их свертываемыми. Может ли кто-нибудь помочь объяснить, как это можно сделать?

...