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 对象链式操作测试代码
Apr 25 Javascript
js函数调用常用方法详解
Dec 03 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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 常用类汇总 推荐收藏
2010/05/13 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
javascript深入理解js闭包
2010/07/03 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python 自动补全(vim)
2014/11/30 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python 如何测试文件是否存在
2020/07/31 Python
python简单实现9宫格图片实例
2020/09/03 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
学历公证书范本
2014/04/09 职场文书
上海世博会口号
2014/06/19 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
表扬稿范文
2015/01/17 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python