bootstrap-table+treegrid实现树形表格


Posted in Javascript onJuly 26, 2019

实现一个树形表格的时候有多种方法:比如把 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="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> 新增</button>',
 '<button type="button" class="RoleOfedit btn-small btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i> 修改</button>',
 '<button type="button" class="RoleOfdelete btn-small btn-primary" style="margin-right:15px;"><i class="fa fa-trash-o" ></i> 删除</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>

效果图:

bootstrap-table+treegrid实现树形表格

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 #Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 #Javascript
微信小程序设置滚动条过程详解
Jul 25 #Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python实现C4.5决策树算法
2018/08/29 Python
Python定义一个函数的方法
2020/06/15 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
蟋蟀的住宅教学反思
2014/04/26 职场文书
2014国庆节标语口号
2014/09/19 职场文书
论文答谢词
2015/01/20 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python