bootstrap 表格树

最新推荐文章于 2024-09-29 12:24:49 发布

zaige66

最新推荐文章于 2024-09-29 12:24:49 发布

阅读量2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zaige66/article/details/81877719

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

前言

最近要弄一下表格树，项目用的是 bootstrap 模板，所以很容易就搜到了官网的例子 http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/treegrid.html，但是复制到自己的项目中时，一直出不来层级的效果，在排除代码错误后，狠下心来把项目中用到 css 与 js 一个个与官网的 css 与 js 进行对比，最后发现是本地引入的 bootstrap-table.js 是 1.11.1 版本，换成 https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js 后，效果就出来了。官网的例子中没有级联选中与取消选中的功能，网上搜了一下无果后，手动写了下，现在把代码贴上

代码

<!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>
    <button onclick="test()">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.11.1/bootstrap-table.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!--<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.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:system:get"},{"id":2,"pid":0,"status":1,"name":"字典管理","permissionValue":"open:dict:get"},{"id":20,"pid":1,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":200,"pid":20,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":201,"pid":20,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":2001,"pid":200,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":2002,"pid":200,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":21,"pid":1,"status":1,"name":"编辑系统","permissionValue":"open:system:edit"},{"id":22,"pid":1,"status":1,"name":"删除系统","permissionValue":"open:system:delete"},{"id":33,"pid":2,"status":1,"name":"系统环境","permissionValue":"open:env:get"},{"id":333,"pid":33,"status":1,"name":"新增环境","permissionValue":"open:env:add"},{"id":3333,"pid":33,"status":1,"name":"编辑环境","permissionValue":"open:env:edit"},{"id":233332,"pid":33,"status":0,"name":"删除环境","permissionValue":"open:env:delete"}]')
  $(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: '权限值'
        }
      ],
      // bootstrap-table-tree-column.js 插件配置
      // treeShowField: 'name',
      // parentIdField: 'pid'
      // bootstrap-table-tree-column.js 插件配置
      // bootstrap-table-treegrid.js 插件配置
      treeShowField: 'name',
      parentIdField: 'pid',
      onResetView: function(data) {
        console.log('load');
        // jquery.treegrid.js
        $table.treegrid({
          // initialState: 'collapsed',
          treeColumn: 1,
          // expanderExpandedClass: 'glyphicon glyphicon-minus',
          // expanderCollapsedClass: 'glyphicon glyphicon-plus',
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });


      },
      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 插件配置
    });
  });
  // 格式化类型
  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>';
    }
  }
</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);
                };
            } 
        }
    </script>

</html>

后记

大家可以直接引入我代码中的 css 与 js 文件，都是cdn地址，最后吐槽一句，前端真坑。