使用bootstrap-table+treegrid轻松实现树形表格
版权申诉
61 浏览量
更新于2024-09-12
收藏 86KB PDF 举报
本文将介绍如何使用bootstrap-table与treegrid插件来实现树形表格功能。这种方法相较于其他如ztree和jqgrid等方法更为轻量级。以下是具体步骤和注意事项：
1. 引入必要的库文件：
在实现树形表格前，需要引入jQuery、bootstrap-table、bootstrap-table-treegrid以及相应的CSS文件。包括`jquery.js`、`bootstrap-table.js`、`bootstrap-table-treegrid.js`、`jquery.treegrid.js`，以及对应的样式表`bootstrap.css`、`bootstrap-table.css`、`jquery.treegrid.css`。这些文件可以从官方CDN或本地文件系统中引入。
2. 数据格式要求：
后端传送到前端的JSON数据必须包含`id`和`pid`字段，这两个字段用于构建树形结构。`id`是每个节点的唯一标识，而`pid`表示父节点的`id`，以此形成层级关系。在实际应用中，这些数据通常从服务器动态获取，而不是像示例中那样静态编写。
3. 设置参数与自定义效果：
bootstrap-table提供了丰富的设置参数，可以根据需求调整表格的显示效果。例如，可以设置列宽、排序、过滤等功能。通过调整这些参数，可以实现用户界面的个性化定制。
4. 完整代码示例：
以下是一个简单的HTML页面结构，展示了如何结合bootstrap-table和treegrid实现树形表格：
```html
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ...其他meta标签... -->
<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">
<!-- ...其他链接样式表... -->
</head>
<body>
<!-- ...表格及相关JavaScript代码... -->
</body>
</html>
```
这个HTML页面中，不仅包含了必要的样式表引用，还需要添加JavaScript代码来初始化和配置表格。这部分代码未在摘要中给出，但通常会包括对表格的实例化，指定数据源，以及应用任何额外的表格选项。
5. 使用方法：
初始化树形表格时，可能需要调用`$.fn.bootstrapTable.init()`，并设置`data-url`属性指向后端数据接口。同时，通过`columns`定义列的显示，使用`formatter`函数处理特定列的数据格式。`options`对象中可以设置`expandRow`, `clickToExpand`等属性控制树形结构的行为。
结合bootstrap-table和treegrid插件，我们可以轻松创建具有树状结构的表格，无需依赖大型的前端框架，适合轻量级的应用场景。在实际开发中，开发者需要根据项目需求调整代码，确保数据的正确加载和展示，并利用提供的API和事件来增强用户体验。
bootstrap-table+treegrid实现树形表格实现树形表格
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的
实现：使用bootstrap-table + treegrid 。
1、引入 jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css 文件：bootstrap.css、
bootstrap-table.css、jquery.treegrid.css；
2、后台传到前台的 json 必须含有 id、pid字段，有 id pid 才能形成树结构（这里为了演示，把 json 写成固定的了，实际中要从后台
获取）；
3、在使用过程中可以参考 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="external nofollow" 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.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
var $table = $('#table');
var data = JSON.parse(
'[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},' +
'{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},' +
'{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},' +
'{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},' +
'{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},' +
'{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},' +
'{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},' +
'{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},' +
'{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},' +
'{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},' +
'{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},' +
'{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},' +
'{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]');
$(function() {
//控制台输出一下数据
console.log(data);
$table.bootstrapTable({
data:data,
idField: 'id',
dataType:'jsonp',
columns: [
{ field: 'check', checkbox: true, formatter: function (value, row, index) {
if (row.check == true) {
// console.log(row.serverName);
下载后可阅读完整内容，剩余3页未读，立即下载
2019-04-29 上传
2023-06-07 上传
2023-06-07 上传
2023-06-01 上传
2023-07-21 上传
2023-07-21 上传
2023-03-16 上传
weixin_38550605
- 粉丝: 5
- 资源: 951
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
