bootstrap树形表格js插件demo_handsontable树形表格,bootstrap可编辑树资源-CSDN文库

共8个文件

js：3个

css：2个

png：2个

需积分: 50 54 浏览量 2018-09-14 11:29:06 上传评论收藏 34KB ZIP 举报

Bootstrap是一款流行的前端开发框架，它提供了丰富的样式和组件，使得网页设计和开发更为高效。在本示例中，我们关注的是“bootstrap树形表格js插件demo”。这个插件允许我们在Bootstrap表格中展示层次结构的数据，这对于显示具有父子关系或者分类信息的数据非常有用。 `treeTable.html`是演示如何使用该树形表格插件的HTML文件。在这个文件中，我们可以看到一个基本的Bootstrap表格结构，但是通过引入特定的JavaScript和CSS文件，这个表格被增强为可以展开和折叠的树形结构。通常，这个HTML文件会包含表格的基本结构，如表头（thead）和表体（tbody），以及用于标识层级关系的特殊数据属性。 `bootstrap_treegrid.js`是核心的JavaScript插件文件。这个文件实现了将普通表格转换为树形表格的功能。它可能包含了用于处理表格行展开和折叠的事件监听器，以及用于解析和展示层级数据的逻辑。可能还会有方法用于初始化表格，加载数据，以及响应用户交互，如点击表格行进行展开或折叠。在使用这个插件时，需要确保正确地引入了Bootstrap的相关CSS和JS文件，以保证样式和交互功能的正常运行。同时，数据通常是以JSON或者其他结构化格式存储的，需要在JavaScript中解析并绑定到表格中。这可以通过在HTML中使用JavaScript模板，或者使用Ajax异步加载数据来实现。在`treeTable.html`中，每个表格行（tr）可能会有一个特殊的类或者数据属性（如"data-parent"）来指示其父级。当用户点击一行时，JavaScript插件会根据这些信息来决定哪些行应该展开或折叠。此外，可能还会有一些自定义的CSS类用于控制展开/折叠状态的视觉表示，比如添加一个图标来指示可折叠性。这个“bootstrap树形表格js插件demo”提供了一个强大的工具，用于在Bootstrap环境中以交互方式展示分层数据。开发者可以根据实际需求调整和扩展这个插件，例如添加搜索、排序和过滤功能，或者改变默认的样式和行为，以适应各种项目需求。在实际应用中，理解这个插件的工作原理以及如何与其交互是非常重要的，这有助于更有效地集成和定制这个功能。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap_treegrid-demo.zip （8个子文件）

treeTable.html 2KB

bootstrap_treegrid

bootstrap-table.js 107KB

bootstrap-table.css 7KB

jquery-treegrid

img

expand.png 3KB

collapse.png 3KB

jquery.treegrid.min.js 10KB

css

jquery.treegrid.min.css 314B

bootstrap-table-treegrid.js 4KB

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table id="treeTable" class="table table-hover table-bordered"></table>  <script type="application/javascript"> $(function() { loadTable(); function loadTable(){  var $table = $("#treeTable"); $table.bootstrapTable({ url:'服务器数据地址', striped:true, sidePagenation:'server', idField:'id',//主键id treeShowField: 'name', parentIdField: 'parentId',//父id clickToSelect: true, columns:[ { field:'name', title:'名称' },{ field:'permission', title:'权限' },{ field:'description', title:'描述' },{ title: '操作', field: 'id', formatter: function (value) { var html = '<a class="btn btn-xs btn-info cate-edit" onclick="updatePer('+ value + ')" >编辑</a>'; html += '　<a class="btn btn-xs btn-danger cate-delete" onclick="checkPer('+ value + ')" >删除</a>'; return html; } }, ], onLoadSuccess: function(result) { $table.treegrid({ initialState: 'collapsed',//收缩 indentation:'20', treeColumn: 0,//指明第几列数据改为树形 expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom', expanderCollapsedClass: 'glyphicon glyphicon-triangle-right', onChange: function() { $table.bootstrapTable('resetWidth'); } }); } }); } }); </script> </body> </html>

评论收藏

内容反馈