Загрузочный стол: как вложить один стол в другой?

Question

Я использую это bootstrap-table. Я хотел бы вложить один стол в другой.

$(document).ready(function() { 
 
    var t = [{ 
 
    "id": "1", 
 
    "name": "john", 
 
    }, { 
 
    "id": "2", 
 
    "name": "ted" 
 
    }]; 
 

 

 
    //TABLE 1 
 
    $('#summaryTable').bootstrapTable({ 
 
    data: t, 
 
    detailFormatter: detailFormatter 
 
    }); 
 

 
    function detailFormatter(index, row, element) { 
 
    $(element).html(row.name); 
 
    $(element).html(function() { 
 
     //I was thinking of putting the code here, but I don't know how to do it so it will work, 
 
     //except javascript, it needs to be put this html code <table id="detailTable"></table> 
 

 
    }); 
 

 

 
    // return [ 
 

 
    // ].join(''); 
 
    } 
 

 
    //TABLE 2 
 
    var t2 = [{ 
 
    "id": "1", 
 
    "shopping": "bike", 
 
    }, { 
 
    "id": "2", 
 
    "shopping": "car" 
 
    }]; 
 
    $('#detailTable').bootstrapTable({ 
 
    data: t2, 
 
    columns: [{ 
 
     field: 'id', 
 
     title: 'id' 
 
    }, { 
 
     field: 'shopping', 
 
     title: 'Shopping detail' 
 
    }, { 
 
     field: 'status', 
 
     checkbox: true 
 
    }], 
 
    checkboxHeader: false 
 

 
    }); 
 
    $('#detailTable').on('check.bs.table', function(e, row, $el) { 
 
    alert('check index: ' + row.shopping); 
 
    }); 
 
    $('#detailTable').on('uncheck.bs.table', function(e, row, $el) { 
 
    alert('uncheck index: ' + row.shopping); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <p>TABLE 1</p> 
 
    <table id="summaryTable" data-detail-view="true"> 
 
    <thead> 
 
     <tr> 
 
     <th data-field="id" data-align="center" data-width="20px">id</th> 
 
     <th data-field="name" data-align="center">Name</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
    <br> 
 

 
    <p>TABLE 2</p> 
 
    <table id="detailTable"></table> 
 

 
</div>

Вот ссылка моей демо: fiddle

Есть две таблицы. В таблице 1 есть расширяемые строки, и я хочу поместить таблицу 2 в каждую строку таблицы 1. Эта функция называется detailFormatter, которая делает это и где вы можете вернуть строку или визуализировать элемент (я играл с ним, но я могу " t заставить его работать). Для этой демонстрации таблица 1 создается с некоторым html-кодом, а в таблице 2 используется только javascript, но есть этот инициирующий div <table id="detailTable"></table> (для меня не имеет значения, как это делается). Итак, вопрос заключается в том, как поставить таблицу 2 в таблицу 1 с возможностью использования ее событий (например, отметьте или снимите флажок), как показано в демонстрации для таблицы2? Позже я хотел бы использовать это событие onExpandRow поэтому, когда пользователь расширяет строку таблицы 1, он будет получать данные из базы данных, и это будет заполнить таблицу 2.

Answer 1

Ну просто клонировать detailTable и поместить его в каждом row с detailFormatter, как показано ниже:

function detailFormatter(index, row, element) { 
    $(element).html($('#detailTable').clone(true)); 
} 

Теперь будет дублирующие id «s создаются, когда вы делаете clone, так что вы просто удалите его, изменив его id, как показано ниже:

function detailFormatter(index, row, element) { 
    $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id)); 
} 

Кроме того, вы можете скрыть #detailTable, так как вы просто иметь его, чтобы добавить его в другой table и как только вы скрыть его нужно добавить show к cloned tables, как все свойства будут скопированы в clone(true), которые можно сделать, как показано ниже :

function detailFormatter(index, row, element) { 
    $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id).show()); 
} 
//..... 
//..... 
//..... 
//At the end 
$("#detailTable").hide(); 

A complete DEMO

Answer 2

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

var expandedRow = row.id; 
$(element).html(
    "<table id='detailTable"+expandedRow+"'><thead><tr><th data-field='id2' data-align='center' data-width='20px'>id2</th>" + 
    "<th data-field='shopping' data-align='center'>Shopping detail</th>" + 
    "<th data-field='status' data-checkbox='true'></th>" + 
    "</tr></thead></table>"); 

$('#detailTable'+expandedRow).bootstrapTable({ 
    data: t2, 
    checkboxHeader: false 
}); 

Я думаю, что этот способ более независим. В то время нет необходимости открывать одну панель. События и методы, похоже, работают нормально.

Full code here.