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 相关文章推荐
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
uni-app从安装到卸载的入门教程
May 15 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python ORM编程基础示例
2020/02/02 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
员工培训邀请函
2014/01/11 职场文书
开学寄语大全
2014/04/08 职场文书
保护环境演讲稿
2014/05/10 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书