什么是treetable？如何在Web应用程序中使用它？

在 JavaScript 中创建数据源并初始化 Treetable。

$(function() {
  // 创建数据源
  var data = [
    {
      "id": "1",
      "text": "Node 1",
      "children": [
        { "id": "2", "text": "Node 1.1" },
        { "id": "3", "text": "Node 1.2" }
      ]
    },
    {
      "id": "4",
      "text": "Node 2"
    }
  ];

  // 初始化 Treetable
  $('#myTreetable').jstree({
    'core': {
      'data': data
    }
  });
});

运行代码，可以看到 Treetable 成功地在网页上展示了数据。此时，点击节点的“+”号即可展开子级数据。

使用原生JavaScript实现

如果你不想使用第三方插件，也可以使用原生 JavaScript 实现 Treetable 的功能。以下是一个简单的示例：

需要在 HTML 中创建一个

在 JavaScript 中创建数据源并渲染表格。

// 创建数据源
var data = [
  {
    "name": "文件夹 1",
    "size": "",
    "create_time": "2022-01-01",
    "children": [
      { "name": "文件 1", "size": "10 KB", "create_time": "2022-01-02" },
      { "name": "文件 2", "size": "20 KB", "create_time": "2022-01-03" }
    ]
  },
  {
    "name": "文件夹 2",
    "size": "",
    "create_time": "2022-01-04",
    "children": [
      { "name": "文件 3", "size": "30 KB", "create_time": "2022-01-05" },
      { "name": "文件 4", "size": "40 KB", "create_time": "2022-01-06" }
    ]
  }
];

// 渲染表格
var tbody = document.querySelector('#myTreetable tbody');
for (var i in data) {
	var item = data[i];
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
	var td3 = document.createElement('td');
	td1.textContent = item.name;
	td2.textContent = item.size;
	td3.textContent = item.create_time;
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tbody.appendChild(tr);
	if (item.children) {
		// 创建子级表格
		var childTable = document.createElement('table');
		var thead = document.createElement('thead');
		var trHead = document.createElement('tr');
		var th1 = document.createElement('th');
		var th2 = document.createElement('th');
		var th3 = document.createElement('th');
		th1.textContent = '名称';
		th2.textContent = '大小';
		th3.textContent = '创建时间';
		trHead.appendChild(th1);
		trHead.appendChild(th2);
		trHead.appendChild(th3);
		thead.appendChild(trHead);
		childTable.appendChild(thead);
	
	var tbodyChild = document.createElement('tbody');
	for (var j in item.children) {
		var childItem = item.children[j];
		var trChild = document.createElement('tr');
		var td1Child = document.createElement('td');
		var td2Child = document.createElement('td');
		var td3Child = document.createElement('td');
		td1Child.textContent = childItem.name;
		td2Child.textContent = childItem.size;
		td3Child.textContent = childItem.create_time;
		trChild.appendChild(td1Child);
		trChild.appendChild(td2Child);
		trChild.appendChild(td3Child);
		tbodyChild.appendChild(trChild);
	}
	childTable.appendChild(tbodyChild);
	
	// 将子级表格嵌入到父级表格中
	var tdChild = document.createElement('td');
	tdChild.appendChild(childTable);
	tr.appendChild(tdChild);
	
	// 添加展开/折叠按钮
	var tdButton = document.createElement('td');
	var button = document.createElement('button');
	button.textContent = '+';
	button.addEventListener('click', function() {
		if (this.textContent === '+') {
			this.textContent = '-';
			childTable.style.display = 'table';
		} else {
			this.textContent = '+';
			childTable.style.display = 'none';
		}
	});
		tdButton.appendChild(button);
		tr.appendChild(tdButton);
		
		// 默认情况下，子级表格应该是隐藏的
		childTable.style.display = 'none';
	}
}

运行代码，即可看到 Treetable 成功地渲染出来了。此时，点击“+”按钮即可展开子级数据。

Treetable 是一种非常实用的用户界面元素，可以在 Web 应用程序中方便地呈现分层数据。使用 jQuery 插件或原生 JavaScript 都可以实现 Treetable 的功能，开发者可以根据自己的需要选择相应的实现方式。