使用bootstrap-table+treegrid轻松实现树形表格
版权申诉
86KB |
更新于2024-09-12
| 175 浏览量 | 举报
收藏
限时特惠：#9.90 本文将介绍如何使用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页未读，继续阅读
开通会员，免费下载（低至0.43元/天)
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
付费资源9折优惠
相关推荐
weixin_38550605
- 粉丝: 5
我的内容管理
展开
最新资源
- Delphi实现MYSQL与FastReport条码批量打印教程
- VB.NET图书网站源码与VS2005开发教程
- 解决VS2005输入法兼容问题的补丁发布
- Struts2实现的Ajax进度条展示
- 深入解析CANopen协议规范与文件结构
- Perl编程课程第三部分：深入学习17-25课
- 深入解析计算机网络与因特网技术
- 初中生编写的VC++ RPG游戏代码解析
- JavaScript结合VML绘制动态多边形教程
- Perl编程基础教程：24小时快速入门第一部分
- 探索窗体控件：事件处理与菜单设计(一)
- MSP430F2274移植uC_OS-II的操作系统指南
- 全面掌握Java编程：从基础到面向对象的完整自学PPT资料
- ATMEGA48中文数据手册详尽解读
- 深入探讨Velocity模板引擎源码与MVC模式的融合
- WinForm中数据库备份还原操作全攻略
- ShopEx模板打包工具使用教程详解
- 《Linux程序设计》第四版完整英文原版解析
- Oracle Application Framework中文资料集
- Solaris10下Oracle 10g 10.1.0.3安装与配置详解
- VB.Net到C#项目转换器VBConversions v2.21发布
- 全面的自动控制教学课件资源
- C++模板类编程资料：CommonLib源代码解析
- 深入学习Java基础类组件：JFC Swing教程
