Список элементов в столбце табулатора

Question

Я хочу получить список элементов в табуляторе таким образом, чтобы под-элементы были видны при нажатии на этот элемент.Для столбца есть функция onclick, но можно ли щелкнуть по каждому элементу ячейки?

Я хочу, чтобы столбец выглядел следующим образом:

• Элемент 1
  • подпункт 1
  • подпункт 2
• Элемент 2
  • подпункт 3
  • подпункт 4

Подпункты должны отображаться при нажатиисоответствующий пункт

Answer 1

Используя vanilla javascript и css, вы можете добавить в документ один прослушиватель событий, который проверяет, является ли выбранный элемент li, произошедшим от предполагаемого ul, если это так, проверьте дочерний элемент ul и переключите класс, которыйбудет скрывать это так:

document.addEventListener('click', function(event) {

  if (event.target.matches('.collapsable-subs li')) {
    let subList = event.target.querySelector('ul');
    if (subList) {
      subList.classList.toggle('collapsed')
    }
  }

}, false);

.collapsed {
  display: none;
}

<ul class="collapsable-subs">
  <li>Item 1
    <ul class="collapsed">
      <li>sub item 1</li>
      <li>sub item 2</li>
    </ul>
  </li>
  <li>Item 2
    <ul class="collapsed">
      <li>sub item 3</li>
      <li>sub item 4</li>
      <li>sub item 5 with subs
        <ul class="collapsed">
          <li>sub item 1</li>
          <li>sub item 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Это позволяет вложить много уровней глубоко и затрагивает ul потомков .collapsable-subs, если у вас есть другие вложенные ul s встраница.Вы также можете иметь несколько ul.collapsable-subs, которые будут иметь одинаковое поведение без дополнительных сценариев и без необходимости onclick атрибутов.

Answer 2

Tabulator.prototype.extendModule("format", "formatters", {
            bold: function (cell, formatterParams) {
                return "<strong>" + cell.getValue() + "</strong>"; //make the contents of the cell bold
            },
            uppercase: function (cell, formatterParams) {
                return cell.getValue().toUpperCase(); //make the contents of the cell uppercase
            },
            makelist: function (cell, formatterParams) {
                var des = cell.getValue()
                var table = ""
                des = des.split('/')
                table += '<ul>'
                for (a = 0; a < des.length; a++) {
                    recs = des[a].split(':')
                    recs[0] = recs[0].replace(' ','')
                    table += '<li>' + recs[0]
                    comps = recs[1].split('+')
                    if (comps[0] == '') {
                        break;
                    }
                    table += '<ul>'
                    for (b = 0; b < comps.length; b++) {
                        table += '<li class="comp" hide="no">' + comps[b] + '</li>'
                    }
                    table += '</ul></li>'

                }
                table += '</ul>'
                return table;

            }
        });
        $('#table').on("click",'.comp',function(e){
            if ($(this).attr("hide") == "no"){

            var element = $(this)

            var name = $(this).text()
            var parent_name = $(this).parent().parent().text().split(' ')[0]
            $.ajax({
                url:'/get_sub_items',
                method:'POST',
                data: JSON.stringify({name:name, parent_name:parent_name}),
                success: function(response){
                    console.log(response)
                    list = '<ul>'
                    for(j = 0 ; j < response.length; j++){
                        list += '<li> '+response[j]+'</li>'
                    }
                    list += '</ul>'
                    $(list).appendTo(element)
                }
            })
            $(this).attr("hide", "yes")
            }
            else{
                $(this).children().hide()
                $(this).attr("hide", "no")
            }

            e.preventDefault();
        })

Answer 3

Определите столбцы с cellClick и добавьте дочерние элементы.Взгляните на приведенное ниже определение столбца.

{
      title: "Select",
      field: "select",
      width: 90,
      cellClick: function(e, cell) {
        //cell is the DOM element which is clicked
        //..write logic to append more elements to expand view
      }

}

Answer 4

Вам не нужно копировать метод события везде

function identify() {
    console.log("Element:\n" +
        event.srcElement.outerHTML +
    "\nRow:" +
        event.srcElement.parentElement.outerHTML)
}
function identify2() {
    var me = event.srcElement, me2 = me;
    while((me2 = me2.parentElement) && me2.tagName != "LI");
    console.log("Element:\n" +
        me.outerHTML);
    if(me2) console.log("Parent:\n" + me2.outerHTML);
    else console.log("Parent LI tag not found.");
}

<table onclick="identify()">
    <tr>
        <td>00</td>
        <td>01</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
    </tr>
</table>
<br/>
<ul onclick="identify2()">
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>