boostrapTableTreegrid树表格资源-CSDN下载

共21个文件

js：6个

css：4个

xml：3个

Table

菜单关系和权

需积分: 50 76 浏览量 2019-04-29 14:14:12 上传评论收藏 244KB RAR 举报

BootstrapTable Treegrid是一种基于Bootstrap框架的插件，用于在HTML表格中展示数据并实现树状结构。这个插件扩展了BootstrapTable的基本功能，使得表格能够显示层级数据，这对于处理如菜单关系、权限设计等需要层次展示的信息非常有用。在本文中，我们将深入探讨BootstrapTable Treegrid的使用、功能特性以及如何在实际项目中应用。 BootstrapTable本身是一个轻量级的前端组件，它提供了一种灵活的方式来展示数据，并支持排序、搜索、分页等功能。而Treegrid则进一步增强了表格的功能，使其能够呈现具有父子关系的数据。在BootstrapTable Treegrid中，每一行可以展开或折叠，展示或隐藏其子级数据。 1. **基本使用** 使用BootstrapTable Treegrid首先需要引入必要的CSS和JavaScript库，包括Bootstrap、jQuery、BootstrapTable主文件以及Treegrid插件文件。在HTML中定义表格时，需要添加`data-toggle="table"`和`data-treegrid="true"`属性来启用Treegrid功能。 2. **数据格式** Treegrid的数据需要以JSON或其他支持的格式提供，其中包含标识父节点和子节点关系的字段。通常，一个字段（如`parent_id`）用来表示当前记录的父项，另一个字段（如`id`）作为唯一标识。 3. **配置选项** BootstrapTable Treegrid提供了许多配置选项，例如`expandColumn`用于设置展开/折叠操作所在的列，`expandAll`用于控制是否初始时全部展开，`expandLevel`定义最大展开层级。还可以通过`onExpand`和`onCollapse`事件监听节点的展开和折叠动作。 4. **操作方法** 用户可以通过API进行交互，例如`expandRow`和`collapseRow`用于手动展开或折叠指定行，`toggleRow`则在展开和折叠之间切换。此外，`load`方法可以用于异步加载子级数据。 5. **自定义模板** 如果需要更复杂的视图，可以通过`formatter`函数自定义单元格内容，或者使用`events`属性绑定自定义的JavaScript事件。 6. **菜单关系与权限设计** 在菜单关系管理中，BootstrapTable Treegrid可以清晰地展示菜单的层级结构，便于用户理解并进行编辑。对于权限设计，它可以直观地呈现不同角色或用户的访问权限，简化权限分配和管理。 7. **拓展功能** 除了基础的展开/折叠功能，Treegrid还支持排序、过滤、搜索等高级功能。结合BootstrapTable的其他插件，如分页、列选择等，可以构建出强大的数据管理界面。在实际项目中，根据需求可以调整Treegrid的样式，定制图标以表示展开和折叠状态，也可以通过JavaScript进行交互逻辑的增强，如懒加载子级数据以优化性能。BootstrapTable Treegrid是一个强大且灵活的工具，它为开发人员提供了一种优雅的方式，来处理和展示层次结构复杂的数据。

资源详情

资源评论

资源推荐

收起资源包目录

boostrapTable Treegrid表格树.rar （21个子文件）

boostrapTable Treegrid表格树

fonts

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.eot 20KB

jquery-1.11.1.js 276KB

bootstrap-table-zh-CN.js 1KB

bootstrap-table.js 107KB

jquery.treegrid.min.js 10KB

bootstrap3.3.7.min.js 36KB

bootstrap-table-treegrid.js 3KB

css

jquery.treegrid.min.css 314B

bootstrap.3.3.7.css 143KB

bootstrap-table.css 7KB

bootstrap-theme.css 26KB

url

bootstrap_treegrid.json 1KB

.idea

workspace.xml 9KB

deployment.xml 346B

boostrapTable表格树.iml 458B

modules.xml 296B

index.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/bootstrap.3.3.7.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <link href="css/bootstrap-table.css" rel="stylesheet"> <link href="css/jquery.treegrid.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script> <script type="text/javascript" src="js/bootstrap-table.js"></script> <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script> <script type="text/javascript" src="js/bootstrap-table-treegrid.js"></script> <script type="text/javascript" src="js/jquery.treegrid.min.js"></script> <script> $(function () { var $table = $("#table"); $table.bootstrapTable({ url:'url/bootstrap_treegrid.json', striped:true, sidePagenation:'server', idField:'id', columns:[ { field: 'ck', checkbox: true } ,{ field: 'name', title: '名称' }, { field: 'status', title: '状态', }, { field: 'permissionValue', title: '权限值' }, { field: 'operate', title: '操作', }, ], treeShowField: 'name', parentIdField: 'pid', onLoadSuccess: function(data) { $table.treegrid({ initialState: 'collapsed',//收缩 treeColumn: 1,//指明第几列数据改为树形 expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom', expanderCollapsedClass: 'glyphicon glyphicon-triangle-right', onChange: function() { $table.bootstrapTable('resetWidth'); } }); } }); }) </script> </head> <body> <table id="table"></table> </body> </html>