Как использовать url: вместо data: для функции onExpandRow? - PullRequest
Новая
       8

Как использовать url: вместо data: для функции onExpandRow?

0 голосов
/ 24 января 2019

Я следовал примеру для onExpandRow, однако я не могу понять, как использовать информацию строки, которая передается с URL для моей таблицы вместо тега данных. В настоящее время он просто копирует всю мою таблицу в функцию расширения, а не только данные строк. Возможно, это простое исправление, но мне его не хватает. 

onExpandRow: function (index, row, $detail) {
console.log(row)
  $detail.html('<table></table>').find('table').bootstrapTable({
            url: 'table.php',
            columns:[{
                field: 'mfr_name',
                title: 'manufacturer'},
                {field: 'phone_number',
                title: 'phone'},
            ],

        })

В этом примере данные сохраняются в переменной и вместо вызова url: one используется data: call. 

var data = [{
'col1': '1.1',
'col2': '1.2',
'nested': [{
'col3': '1.3',
'col4': '1.4',
'col5': '1.5'
}]
 onExpandRow: function(index, row, $detail) {
  console.log(row)
  $detail.html('<table></table>').find('table').bootstrapTable({
    clickToSelect: true,
    columns: [{
      field: 'select',
      checkbox: true
    }, {
      field: 'col3',
      title: 'Col3'
    }, {
      field: 'col4',
      title: 'Col4'
    }, {
      field: 'col5',
      title: 'Col5'
    }],
    data: row.nested,

1 Ответ

0 голосов
/ 31 января 2019

Вы имели в виду что-то вроде этого:

http://jsfiddle.net/eitanmg/m41ok0ue/12/

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

 $(function () {
  $('#table').bootstrapTable({
    data: data,
    detailView:true,
    onExpandRow: function (index, row, $detail) {
    $detail.html('Loading request...');
    $.ajax({
        type: "GET",
        url: "/your_custom_url_that_contains_the_data",
        success: function (result) {
          $detail.html('<table></table>').find('table').bootstrapTable({
          columns: [{
              field: 'select',
              checkbox: true
              }, {
              field: 'col1',
              title: 'Col1'
              }, {
              field: 'col2',
              title: 'Col2'
              }, {
              field: 'col3',
              title: 'Col3'
          }],
          data: JSON.parse(result),
          });
        }
      });
    }
  });
});
...