Как сделать несколько уровней вложенных таблиц в JQuery/HTML

Question

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

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

Например:

ColHeader1    ColHeader2 // main table headers only shown at the top 
record1     ... 
    ChildHeader1   ChildHeader2 // child headers shown for each table 
    childrec1    ... 
    SubChildHeader1 SubChildHeader2 // child headers shown for each table 
    subchildrec1  ... 
    childrec2    ... 
record2     ... 
    ChildHeader1   ChildHeader2 // child headers shown for each table 
    childrec5    ... 
record3     ... 

Я пытался создать код путем расширения образца я нашел, но он не работает для расширения внутренней большой таблицы. Код можно найти здесь: http://jsfiddle.net/afsz5brg/

Конечный продукт будет в приложении ASP.Net MVC, но пока я просто пытаюсь заставить его работать в javascript/JQuery, так что, надеюсь, я могу просто изменить данные отправляется на него. Я рад рассмотреть альтернативные способы сделать это или сказать, что какой-либо из кода делает что-то плохое/устарело.

Answer 1

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

1) Ваше предположение о регистрации обратного вызова на $('#detailsTable tbody td').on('click', ...); и что вызов каждого нового экземпляра создаваемой таблицы неверен.

Если таблица данных jQuery внутренне клонировала элемент #detailsTable, тогда ваш код будет работать. Но это не так, поскольку вы извлекаете разметку HTML из #detailsTable и возвращаете ее в fnOpen следующим образом: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');, поэтому callback никогда не вызывается.

Необходимо зарегистрировать обратный вызов только что созданной таблицы деталей. Проверьте это JsFiddle, чтобы посмотреть, как это сделать.

2) Думаю, я также заметил другую ошибку при чтении кода. Я не исправил это, поскольку не был уверен, прав я или нет. В обратном вызове для #detailsTable вы вызываете fnFormatDetails() вместо fnFormatSubDetails() так же, как oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); В настоящее время никто не вызывает fnFormatSubDetails(). Проверьте, является ли это ошибкой или нет.