Javascript 列tabluator中的项目列表

我希望在制表器中有一个项目列表，这样子项目在单击该项目时可见。列有一个onclick函数，但是我可以为单元格的每个元素单击吗

我希望专栏内容如下：

• 项目1
  • 分项目1
  • 分项目2
• 项目2
  • 分项目3
  • 分项目4

---

单击相应的项时，子项应该是可见的

您不需要到处复制事件方法

函数标识（）{
console.log（“元素：\n”+
event.srcmelement.outerHTML+
“\n现在：”+
event.srcElement.parentElement.outerHTML）
}
函数identification2（）{
var me=event.src元素，me2=me；
而（（me2=me2.parentElement）&&me2.tagName！=“LI”）；
console.log（“元素：\n”+
me.outerHTML）；
if（me2）console.log（“父：\n”+me2.outerHTML）；
else console.log（“未找到父LI标记”）；
}

00
01
10
11



咖啡
茶

红茶
绿茶


牛奶

使用

单元格定义列，单击

并附加子元素。请看下面的示例列定义

{
      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
      }

}

---

使用普通javascript和css，您可以向文档中添加一个事件侦听器，用于检查单击的元素是否是从预期的

ul

派生而来的

li

，如果是，则检查子元素

ul

，并切换将其隐藏的类：

document.addEventListener（'click'，函数（事件）{
if（event.target.matches（'.collapsable subs li'））{
let subList=event.target.querySelector（'ul'）；
如果（子列表）{
subList.classList.toggle（'折叠'）
}
}
}，假）
。已折叠{
显示：无；
}

项目1

分项目1
分项目2


项目2

分项目3
分项目4
分项目5及分项

分项目1
分项目2




制表器.原型.扩展模块（“格式”，“格式化程序”{
粗体：函数（单元格、formatterParams）{
返回“”+单元格。getValue（）+”“；//将单元格内容加粗
},
大写：函数（单元格，formatterParams）{
return cell.getValue（）.toUpperCase（）；//使单元格内容大写
},
生成列表：函数（单元格、formatterParams）{
var des=cell.getValue（）
var table=“”
des=des.split（“/”）
表+='
'
对于（a=0；a'
}
表+='
'
}
表+=''
返回表；
}
});
$（'#table'）。在（“单击”、'.comp'，函数（e）上{
if（$（this.attr（“hide”）=“no”）{
var元素=$（此）
变量名称=$（this）.text（）
var parent_name=$（this.parent（）.parent（）.text（）.split（“”）[0]
$.ajax({
url:“/get_sub_items”，
方法：'POST'，
数据：JSON.stringify（{name:name，parent\u name:parent\u name}），
成功：功能（响应）{
console.log（响应）
列表=“
”
对于（j=0；j'
}
列表+='
'
$（列表）.appendTo（元素）
}
})
$（this.attr（“隐藏”、“是”）
}
否则{
$（this.children（）.hide（））
$（this.attr（“隐藏”、“否”）
}
e、 预防默认值（）；
})
制表器具有处理嵌套数据的内置功能

你可以选择

或

您还可以使用以您认为合适的任何方式操作行
发布您尝试过的代码，我们可以从中提供帮助。使用jquery的切换功能。我只希望该项展开并显示其子项，单元格单击将展开所有项。链接中的代码添加一个行元素，我想在特定元素下的特定列中添加一个元素。@al27-是的，您可以使用CSS来完成。在示例中，我使用了rowElement。相反，请尝试以下
cell.cell.element.append（'helloworld'）是制表器中的此功能。
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();
        })