bootstrap-table + treegrid 实现树形表格

我不是女神ヾ 2023-07-01 05:23 23阅读 0赞

*  ### 效果如下 ###
 *  ### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTU0NjA0_size_16_color_FFFFFF_t_70][]data数据 ###

需要有一个id和一个pid，数据类型可以是整数或者是字符串，本文章数据的id为menuCode，pid为parentCode

var data = ([
      {
        "home":false,
        "menuCode":"operating_platform",
        "menuIcon":"fa fa-desktop",
        "menuName":"我的工作台",
        "parentCode":"",
        "status":1,
        "sortNo":0,
        "url":"url"
      },
      {
        "home":false,
        "menuCode":"customer",
        "menuIcon":"",
        "menuName":"咨询列表",
        "status":1,
        "sortNo":0,
        "url":"/customer/customerList",
        "parentCode":"operating_platform"
      },
      {
        "home":false,
        "menuCode":"query_scheme",
        "menuIcon":"",
        "menuName":"方案列表",
        "parentCode":"operating_platform",
        "status":1,
        "sortNo":1,
        "url":"scheme/makeSchemePage?pkCusMtId=14"
      },
      {
        "home":false,
        "menuCode":"excel_customer",
        "menuName":"客户导入",
        "parentCode":"operating_platform",
        "status":"1",
        "sortNo":4,
        "url":"customer/excel"
      },
      {
        "home":false,
        "menuCode":"sys_manger",
        "menuIcon":"fa fa-list",
        "menuName":"系统管理",
        "parentCode":"",
        "status":1,
        "sortNo":0,
        "url":"user/goUserPage"
      },
      {
        "home":false,
        "menuCode":"user_manger",
        "menuName":"用户管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":0,
        "url":"user/goUserPage"
      },
      {
        "home":false,
        "menuCode":"role",
        "menuName":"角色管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":1,
        "url":"role/goRolePage"
      },
      {
        "home":false,
        "menuCode":"dictionary",
        "menuIcon":"",
        "menuName":"数据字典",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":3,
        "url":"/dictionary/dictionaryPage"
      },
      {
        "home":false,
        "menuCode":"resources",
        "menuName":"菜单管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":5,
        "url":"cusResource/goCusResourceList"
      },
    ])

*  ### 引入css和js ###

*  ### html完整代码 ###

<!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" menuName="viewport">
        <meta content="yes" menuName="apple-mobile-web-app-capable">
        <meta content="black" menuName="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" menuName="format-detection">
        <meta content="email=no" menuName="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 οnclick="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 = ([
      {
        "home":false,
        "menuCode":"operating_platform",
        "menuIcon":"fa fa-desktop",
        "menuName":"我的工作台",
        "parentCode":"",
        "status":1,
        "sortNo":0,
        "url":"url"
      },
      {
        "home":false,
        "menuCode":"customer",
        "menuIcon":"",
        "menuName":"咨询列表",
        "status":1,
        "sortNo":0,
        "url":"/customer/customerList",
        "parentCode":"operating_platform"
      },
      {
        "home":false,
        "menuCode":"query_scheme",
        "menuIcon":"",
        "menuName":"方案列表",
        "parentCode":"operating_platform",
        "status":1,
        "sortNo":1,
        "url":"scheme/makeSchemePage?pkCusMtId=14"
      },
      {
        "home":false,
        "menuCode":"excel_customer",
        "menuName":"客户导入",
        "parentCode":"operating_platform",
        "status":"1",
        "sortNo":4,
        "url":"customer/excel"
      },
      {
        "home":false,
        "menuCode":"sys_manger",
        "menuIcon":"fa fa-list",
        "menuName":"系统管理",
        "parentCode":"",
        "status":1,
        "sortNo":0,
        "url":"user/goUserPage"
      },
      {
        "home":false,
        "menuCode":"user_manger",
        "menuName":"用户管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":0,
        "url":"user/goUserPage"
      },
      {
        "home":false,
        "menuCode":"role",
        "menuName":"角色管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":1,
        "url":"role/goRolePage"
      },
      {
        "home":false,
        "menuCode":"dictionary",
        "menuIcon":"",
        "menuName":"数据字典",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":3,
        "url":"/dictionary/dictionaryPage"
      },
      {
        "home":false,
        "menuCode":"resources",
        "menuName":"菜单管理",
        "parentCode":"sys_manger",
        "status":1,
        "sortNo":5,
        "url":"cusResource/goCusResourceList"
      },
    ])
    
        $(function() {
     
            //控制台输出一下数据
            // console.log(data);
            console.log(data);
            $table.bootstrapTable({
                data:data,
                idField: 'menuCode',
                dataType:'jsonp',
                columns: [
                    { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                            if (row.check == true) {
                                // console.log(row.servermenuName);
                                //设置选中
                                return {  checked: true };
                            }
                        }
                    },
                    { field: 'menuName',  title: '名称' },
                    // {field: 'id', title: '编号', sortable: true, align: 'center'},
                    { field: 'menuCode', title: '资源编码'},
                    { field: 'parentCode', title: '父类资源编码'},
                    { field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },
                    { field: 'url', title: 'url'  },
                    { field: 'sortNo',title:'顺序号'},
                    { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
                ],
     
                // bootstrap-table-treegrid.js 插件配置 -- start
     
                //在哪一列展开树形
                treeShowField: 'menuName',
                //指定父id列
                parentIdField: 'parentCode',
     
                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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTU0NjA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200119111315404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTU0NjA0,size_16,color_FFFFFF,t_70