Информационная панель ниже TRs

Question

У меня есть таблица, и я бы хотел добавить скрытую/демонстрируемую панель под каждой строкой для большего количества элементов управления и информации, чем это может быть удобно в таблице. Моя первая мысль была иметь родственный тр для каждого оригинального тра, и положить один тд внутри с соответствующим Colspan:

<tbody> 
    <tr> 
    <td>...</td> 
    ... 
    <tr> 
    <tr class="tablesorter-childRow"> 
    <td colspan="4">...</td> 
    </tr> 
    ... 
</tbody> 

Каждой оригинальная строка будет иметь кнопку, которая будет скрывать() или шоу() соответствующее tr, а td в дочерней строке будет иметь все дополнительные элементы управления, которые не должны рассматриваться нормально.

Это становится сложно, потому что я использую d3 для построения таблицы, а d3 не нравится несколько элементов в каждом столбце (см. this stack post и this other thing).

Это также сложно, потому что я использую tablesorter, который сортирует клиентскую сторону таблицы, используя значения в tds, поэтому исходные данные должны оставаться в формате таблицы. (Он может содержать пары рядов вместе, используя класс css «tablesorter-childRow».) Я также не считаю, что у меня может быть несколько тбодов, потому что они не сортируются вместе с строками - каждая строка tbody сортируется.

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

Итак, вопрос времени: как еще я могу создать эту панель,

1. двигается с исходными строками таблицы
2. не влияет на сортировку
3. может быть скрыт или показан?

Answer 1

Если вы хотите, чтобы два элемента брака использовали одни и те же данные, самым простым способом в d3 является группировка их под родительским элементом. Вы назначаете родительский элемент данных, а затем, когда вы создаете его два дочерних элемента (без присвоения данных), они наследуют данные родителя.

В SVG обычным родительским элементом является <g>. Для вашей цели естественным родительским элементом будет <tbody>, который может использоваться для группировки строк таблицы. Однако вам нужно будет изменить используемый вами код сортировки таблицы, чтобы отсортировать отдельные элементы <tbody> вместо отдельных строк.

Единственный вариантом был бы динамически устанавливать содержание информации ряда и вставить его в нужном месте каждый раз, когда вы хотите, чтобы показать его, подобно тому, как много работы примеров подсказки: это же подсказка, просто перемещались и с новыми данными. Если вы используете d3 для присоединения обработчика событий в строках таблицы, он передаст объект данных строки с щелчком на функцию обработки событий, поэтому вы можете использовать эти данные для заполнения информационного содержимого без создания данных, присоединиться. Чтобы вставить информационную строку после щелкнутого элемента <tr>, вы можете использовать функцию d3's insert(), но формат не идеален; лучше использовать plain Javascript или JQuery. Вам также нужно будет удалить информационную строку, прежде чем запускать сортировку.

tableRows.on("click", showInfo); 
/* remember to give your rows a tabIndex, so that keyboard users can 
    trigger the click action */ 

/* Create the persistent info box */ 
var infoRow = d3.select(document.createElement("tr")) 
      //create a new <tr>, unattached to the document 
       .attr("class", "infoBox";//set class to allow unique formatting 

infoRow.append("td") //add a <td> within the <tr> 
     .attr("colspan", colNames.length); //set to fill all columns 


/* Show the info row for a clicked element */ 
function showInfo(d,i) { 

    /* Hide info box if currently shown */ 
    infoRow.style("display", "none"); 

    /* Set content to match clicked row */ 
    infoRow.select("td") //select the <td> element 
      .html(/* create html from the d object 
        you don't need a function(d), just 
        concatenate the string. */) 

    /* Insert the row in the correct place. 
     This will automatically remove it from any current location */ 
    this.parentNode.insertBefore(infoRow, this.nextSibling); 
     //"this" is the tableRow object that received the click event 

    infoRow.style("display", null); 
     //revert to default display setting (i.e. table-row) 
} 

function sort(/*parameters*/) { 
    infoRow.remove(); 
    //remove the infoRow element from the document, 
    //so it only exists as a Javascript object again 

    /* Run your sort code */ 
}