列制表符中的项目列表

Question

我想要一个制表器中的项目列表，以便在单击该项目时可以看到子项目。该列有一个 onclick 功能，但我可以点击单元格的每个元素吗？

我希望列如下所示：

• 项目 1
  • 子项 1
  • 子项 2
• 项目 2
  • 子项 3
  • 子项 4

点击相应的项目应该可以看到子项目

Answer 1

使用 vanilla javascript 和 css，您可以向文档添加一个事件侦听器，以检查单击的元素是否是预期的 ul 的后代li，如果是，请检查子 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>

这允许嵌套多个级别，并且仅影响 .collapsable-subs 的后代ul，以防您在页面中有其他嵌套的 uls。您还可以拥有多个ul.collapsable-subs，它们都具有相同的行为，无需额外的脚本，也不需要onclick 属性。

Answer 2

Tabulator 具有处理嵌套数据的内置功能。

您可以选择Nested Data Trees

或Nested Tables

您还可以使用Custom Row Formatters 以您认为合适的任何方式操作行

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>

Answer 5

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