树表格完整demo Bootstrap+treeTable

最新推荐文章于 2023-10-19 10:55:22 发布

xxf159797

最新推荐文章于 2023-10-19 10:55:22 发布

阅读量5.5k

点赞数

分类专栏： Web前端其他 JAVA 文章标签： bootstrap tree 树table treegrid bootstrap-table

本文链接：https://blog.csdn.net/xxf159797/article/details/105504153

版权

该博客介绍了如何结合Bootstrap和treeTable创建一个完整的树形表格。内容涉及到所需的js和css文件，包括jquery.js、bootstrap-table相关的js和css，以及jquery.treegrid.js。关键在于后台数据需要包含id和pid字段来构建树结构。博主提示可以调整bootstrap-table的参数以定制所需功能。

摘要由CSDN通过智能技术生成

使用bootstrap-table + treegrid 。

js 文件： jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js

css 文件：bootstrap.css、bootstrap-table.css、jquery.treegrid.css；

后台传到前台的 json 必须含有 id、pid字段，有 id pid 才能形成树结构（

在使用过程中可以参考 bootstrap-table 的设置参数，通过不同的设置以达到自己想要的效果；

完整代码：

<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>系统管理</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

</head>

<body>
<div class="container">
    <h1>树形表格 ： Table Treegrid</h1>
    <table id="table"></table>
    <br/>
    <button onclick="test()">选择</button>
</div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.j