一 . 首先展示一张效果图

二. 简单代码实现

直接在项目中复制粘贴以下代码即可使用

相关资料:

jquery-treegrid 官网 https://www.bootcdn.cn/jquery-treegrid/

<!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="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);//设置选中return {  checked: true };}}},{ field: 'name',  title: '名称' },// {field: 'id', title: '编号', sortable: true, align: 'center'},// {field: 'pid', title: '所属上级'},{ field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },{ field: 'permissionValue', title: '权限值'  },{ field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },],// bootstrap-table-treegrid.js 插件配置 -- start//在哪一列展开树形treeShowField: 'name',//指定父id列parentIdField: 'pid',onResetView: function(data) {//console.log('load');$table.treegrid({initialState: 'collapsed',// 所有节点都折叠// initialState: 'expanded',// 所有节点都展开，默认展开treeColumn: 1,// expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式// expanderCollapsedClass: 'glyphicon glyphicon-plus',onChange: function() {$table.bootstrapTable('resetWidth');}});//只展开树形的第一级节点$table.treegrid('getRootNodes').treegrid('expand');},onCheck:function(row){var datas = $table.bootstrapTable('getData');// 勾选子类selectChilds(datas,row,"id","pid",true);// 勾选父类selectParentChecked(datas,row,"id","pid")// 刷新数据$table.bootstrapTable('load', datas);},onUncheck:function(row){var datas = $table.bootstrapTable('getData');selectChilds(datas,row,"id","pid",false);$table.bootstrapTable('load', datas);},// bootstrap-table-treetreegrid.js 插件配置 -- end});});// 格式化按钮function operateFormatter(value, row, index) {return ['<button type="button" class="RoleOfadd btn-small  btn-primary" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>','<button type="button" class="RoleOfedit btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>','<button type="button" class="RoleOfdelete btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'].join('');}// 格式化类型function typeFormatter(value, row, index) {if (value === 'menu') {  return '菜单';  }if (value === 'button') {  return '按钮'; }if (value === 'api') {  return '接口'; }return '-';}// 格式化状态function statusFormatter(value, row, index) {if (value === 1) {return '<span class="label label-success">正常</span>';} else {return '<span class="label label-default">锁定</span>';}}//初始化操作按钮的方法window.operateEvents = {'click .RoleOfadd': function (e, value, row, index) {add(row.id);},'click .RoleOfdelete': function (e, value, row, index) {del(row.id);},'click .RoleOfedit': function (e, value, row, index) {update(row.id);}};
</script>
<script>/*** 选中父项时，同时选中子项* @param datas 所有的数据* @param row 当前数据* @param id id 字段名* @param pid 父id字段名*/function selectChilds(datas,row,id,pid,checked) {for(var i in datas){if(datas[i][pid] == row[id]){datas[i].check=checked;selectChilds(datas,datas[i],id,pid,checked);};}}function selectParentChecked(datas,row,id,pid){for(var i in datas){if(datas[i][id] == row[pid]){datas[i].check=true;selectParentChecked(datas,datas[i],id,pid);};}}function test() {var selRows = $table.bootstrapTable("getSelections");if(selRows.length == 0){alert("请至少选择一行");return;}var postData = "";$.each(selRows,function(i) {postData +=  this.id;if (i < selRows.length - 1) {postData += "， ";}});alert("你选中行的 id 为："+postData);}function add(id) {alert("add 方法 , id = " + id);}function del(id) {alert("del 方法 , id = " + id);}function update(id) {alert("update 方法 , id = " + id);}</script>
</html>

三. 注意点

data数据中的id与pid字段一定要是数字类型的,否则数据无法展示

四.自定义配置

以下配置来之官网(http://maxazan.github.io/jquery-treegrid/)

Configuration Settings

Settings

Parameter Type Default value Description
treeColumn Numeric 0 Number of column using for tree
initialState String expanded Initial state of tree
'expanded' - all nodes will be expanded
'collapsed' - all nodes will be collapsed
saveState Boolean false If true you can reload page and tree state was saved
saveStateMethod String cookie 'cookie' - save state to cookie
'hash' - save state to hash
saveStateName String tree-grid-state Name of cookie or hash to save state.
expanderTemplate String <span class="treegrid-expander"></span> HTML Element when you click on that will be collapse/expand branches
expanderExpandedClass String treegrid-expander-expanded Class using for expander element when it expanded
expanderCollapsedClass String treegrid-expander-collapsed Class using for expander element when it collapsed
indentTemplate String <span class="treegrid-indent"></span> HTML Element that will be placed as padding, depending on the depth of nesting node
onCollapse Function null Function, which will be executed when one of node will be collapsed
onExpand Function null Function, which will be executed when one of node will be expanded
onChange Function null Function, which will be executed when one of node will be expanded or collapsed

Public methods

Method name Description Example
getRootNodes Returns the root branches 
// Expand all root nodes
$('.tree').treegrid('getRootNodes').treegrid('expand');
getNodeId Return the id of node 
if($('#node-2').treegrid('getNodeId')===2){// Do something with node 2
};
getParentNodeId Return the id of parent node or null if node is root 
if($('#node-2').treegrid('getParentNodeId')===2){// Do something if parent node Id is 2
};
getAllNodes Return the all nodes of tree 
// Find all nodes$('#tree-1').treegrid('getAllNodes').each(function() {if ($(this).treegrid("isLast")) {//Do something with all last nodes}});
getParentNode Return the parent node or null if node is root 
// Expand parent node
$('#node-2').treegrid('getParentNode').treegrid('collapse');
getChildNodes Return the child nodes or null if node is leaf 
// Expand child nodes
$('#node-2').treegrid('getChildNodes').treegrid('expand');
getDepth Returns the depth of nested branch 
// Expand all nodes 2nd nesting
$('.tree').find('tr').each(function(){if ($(this).treegrid('getDepth')<2){$(this).treegrid('expand');}
});
isNode return true if element is node 
$('#tree-1').find('tr').each(function() {if ($(this).treegrid("isNode")) {//Do something}});
isLeaf Is there a node leaf 
// hide all files
$('.tree').find('tr').each(function(){if ($(this).treegrid('isLeaf')){$(this).hide();}
});
isLast Return true if node is last in branch 
// hide all last elements
$('.tree').find('tr').each(function(){if ($(this).treegrid('isLast')){$(this).hide();}
});
isFirst Return true if node is first in branch 
// hide all last elements
$('.tree').find('tr').each(function(){if ($(this).treegrid('isFirst')){$(this).hide();}
});
isExpanded Is node expanded 
if($('#node-2').treegrid('isExpanded')){// Do something if node expanded
};
isCollapsed Is node collapsed 
if($('#node-2').treegrid('isCollapsed')){// Do something if node collapsed
};
isOneOfParentsCollapsed Is at least one of the parent nodes is collapsed 
if($('#node-2').treegrid('isOneOfParentCollapsed')){// Do something if one of parent collapsed
};
expand Expand node 
$('#node-2').treegrid('expand');
collapse Collapse node 
$('#node-2').treegrid('collapse');
expandRecursive Expand nodes recursively 
$('#node-2').treegrid('expandRecursive');
collapseRecursive Collapse nodes recursively 
$('#node-2').treegrid('collapseRecursive');
expandAll Expand all nodes 
$('#tree').treegrid('expandAll');
collapseAll Collapse all nodes 
$('#tree').treegrid('collapseAll');
toggle Collapse node if it expanded and expand when collapsed 
$('#node-2').treegrid('toggle');
render Redraw the node and all its children 
$('#node-2').treegrid('render');

Events

Event name Description Example
collapse Will fire when node collapsed 
//Alert when node in treegrid with class "tree" collapsed
$('.tree').treegrid('getRootNodes').on('collapse', function(){alert(this);
});
expand Will fire when node expanded 
//Alert when node with id "node1" expanded
$('#node1').on('expand', function(){alert(this);
});
change Will fire when node changed. Expanded or collapsed 
//Alert when node in treegrid with class "tree" changed.
$('.tree').treegrid('getRootNodes').on('change', function(){alert(this);
});

树形表实现 bootstrap-table + treegrid相关推荐

  1. vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题

    在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...

  2. bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...

    前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  3. 二、bootstrap table 父子表和行列调序

    http://blog.csdn.net/yin767833376/article/details/52153443 前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍 ...

  4. bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  5. 【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  6. bootstrap table 实现父子表

    在进行项目时,用到了bootstrap table的父子表,现在记录下使用过程中遇到的坑. <!DOCTYPE html> <html> <head> <me ...

  7. Bootstrap Table 双击、单击行获取该行内容及获取全表的内容

    Bootstrap Table 获取单击或双击的行内容 看到这个应该就知道了bootstrap table的用法及如何使用了,所以下面的名称就不介绍了 test_id为表的id $("#te ...

  8. bootstrap table 主子表 局部数据刷新（刷新子表）

    1.主表中设置data-detail-view="true",启用主子表模式: <table class="table table-striped" wi ...

  9. bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

最新文章

  1. Python使用过滤器（filter）进行图像模糊处理
  2. 硬盘发生不同的故障要采用不同的方案恢复数据
  3. 福禄克网络与NBASE-T联盟联合发布电缆布线基础设施白皮书
  4. docker中使用systemctl启动服务
  5. return 的使用
  6. 使用pscp从windows电脑拷贝数据到linux遇到的ssh_init错误
  7. vscode快捷替换json格式
  8. Unexpected end of JSON input while parsing near错误解决方式（网上的方法）
  9. C# CSV文件读取（带换行单元格中内容处理）
  10. 怎么判断冠词用a还是an_【语法微课堂】英语冠词的用法，学会这4点，轻松玩转a、an、the...
  11. 小学奥数 7657 连乘积末尾0的个数 python
  12. python 列表为空_如果列表为空,则Python返回False
  13. SAP License：SAP不便解决的问题之九——客户退货维修
  14. 计算机网络之传输介质（双绞线、同轴电缆、光纤、无线电缆、微波、激光、红外线）...
  15. php5.2、5.3和5.4,Apache多虚拟主机多版本PHP（5.2+5.3+5.4）共存运行配置
  16. Android ActionBar示例教程
  17. Provisioning Services 7.8 入门系列教程之四 目标设备安装
  18. 傲梅分区助手克隆Linux硬盘,傲梅分区助手复制磁盘或克隆磁盘到另外磁盘
  19. cmi码型变换matlab程序,DDC 通信原理仿真 码型反变换的仿真实现 Ⅰ、基本任务：由抽样 联合开发网 - pudn.com...
  20. 计算机要学什么知识,学电脑要先学什么 学电脑要学习什么知识

热门文章

  1. 关于ES2020语法2345加速浏览器不兼容问题
  2. 阿里巴巴编码规范技能认证考试心得与试题
  3. 【内网穿透服务器】利用云服务器+FRP实现内网穿透并远程连接服务器
  4. springboot自定义启动图标
  5. 记录:起个撒名了， 就叫 《方向》 吧....
  6. cloudstack GuestNetwork Ingress-Egress rule
  7. 面向对象--多态，接口
  8. APP开发的详细流程
  9. 网络安全_密码学实验_非对称加密算法RSA
  10. 服务器的类型都有哪些