推荐开源项目:jQuery TreeGrid - 灵活强大的表格树视图插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery TreeGrid 示例</title>
<link rel="stylesheet" href="jquery-treegrid/css/jquery.treegrid.css" />
<link rel="stylesheet" href="jquery-treegrid/css/jquery.treegrid.extension.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery-treegrid/jquery.treegrid.extension.js"></script>
<script>
$(function(){
$("#tree").treegrid({
initialState: "collapsed",
saveState: true,
expanderTemplate: "<span class='FolderExpander'></span>"
});
});
</script>
</head>
<body>
<table id="tree">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<!-- 这里插入你的树形结构数据 -->
</tbody>
</table>
</body>
</html>
这个代码示例展示了如何在一个HTML页面中引入并初始化jQuery TreeGrid
插件。在实际使用中,你需要将<tbody>
中的内容替换为你的具体树形结构数据。这个插件可以用于创建层级结构的表格,非常适合于展示目录、分类列表等需要层级展示的数据。
评论已关闭