bootstrap-table+treegrid实现树形表格_bootstraptable树形表格,bootstrap-table-treegrid资源-CSDN下载

版权申诉

boot

90 浏览量 2020-12-10 12:37:53 上传评论收藏 86KB PDF 举报

资源推荐

资源详情

资源评论

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>

<head>

</head>

<body>

<h1>树形表格： Table Treegrid</h1>

<br/>

</div>

</body>

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页未读，立即下载

评论收藏

内容反馈

版权申诉

weixin_38550605

粉丝: 5

bootstrap-table+treegrid实现树形表格

bootstrap树形表格

boostrapTable Treegrid树表格

bootstrap-treegrid实现树形表格.zip

JS 组件系列之BootstrapTable的treegrid功能

Bootstrap树型表格和多标题表格

BootStrap-table.js 官网下载

BootStrap实现树形目录组件代码详解

bootstrap树形表格js插件

bootstrap-table-treegrid.js

bootstrap-table表格组件

Bootstrap table 实现树形表格联动选中联动取消功能

jquery-treegrid 树形表格组件

用jQuery的treetable实现的树形table

基于Bootstrap的树形表格设计源码

bootstrap树形表格js插件demo

bootstrapTable使用示例.rar

bootstrapTreeTable插件实现异步加载展开所有数据-附件资源

bootstrap treegrid

bootstrap-treegrid.js

boostrapTable表格树

bootstrap-table-tree.js

bootstrap-treetable.js

bootstrap-table-demo

bootstrap-ckeditor-modal-fix

TreeGrid树状表格

Layui树形表格treetable

树形表格 treetable 完整版 带演示demo例子

IDEA的使用，快捷键、插件、配置......

最新资源

树形表格 treetable 完整版带演示demo例子