Question

我遵循了onExpandRow的示例，但是我不知道如何使用随URL传递的行信息代替表数据标签。目前，它只是在expand函数中复制了我的整个表，而不仅仅是行数据。可能是一个简单的修复程序，但我错过了。

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'},
            ],

        })

该示例将数据保存在变量中，并使用data：调用代替url：一个。

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,

Answer 1

您的意思是这样的吗？

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),
          });
        }
      });
    }
  });
});

如何在onExpandRow函数中使用url：而不是data？

1 个答案: