简单知识点实例之四:BootstrapTable新型树表格

之前就一直苦恼,为什么没有树形表格,今天无意中看到,很开心,赶紧实验了一下。具体可以查看官网http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/treegrid.html

一、创建url/bootstrap_treegrid.json

[
  {
    "id": 1,
    "pid": 0,
    "name": "系统管理",
    "referred": "管理"
  },
  {
    "id": 2,
    "pid": 0,
    "name": "字典管理",
    "referred": "字典"
  },
  {
    "id": 20,
    "pid": 1,
    "name": "新增系统",
    "referred": "新增"
  },
  {
    "id": 21,
    "pid": 1,
    "name": "编辑系统",
    "referred": "编辑"
  },
  {
    "id": 22,
    "pid": 1,
    "name": "删除系统",
    "referred": "删除"
  },
  {
    "id": 33,
    "pid": 2,
    "name": "系统环境",
    "referred": "环境"
  },
  {
    "id": 333,
    "pid": 33,
    "name": "新增环境",
    "referred": "新增"
  },
  {
    "id": 3333,
    "pid": 33,
    "name": "编辑环境",
    "referred": "编辑"
  },
  {
    "id": 233332,
    "pid": 33,
    "name": "删除环境",
    "referred": "删除"
  }
]
二、具体源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.3.3.7.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap-table.css" rel="stylesheet">
    <link href="css/jquery.treegrid.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-treegrid.js"></script>
    <script type="text/javascript" src="js/jquery.treegrid.min.js"></script>
    <script>
        $(function () {
            var $table = $("#table");
            $table.bootstrapTable({
                url:'url/bootstrap_treegrid.json',
                striped:true,
                sidePagenation:'server',
                idField:'id',
                columns:[
                    {
                        field: 'ck',
                        checkbox: true
                    },{
                        field:'name',
                        title:'名称'
                    },{
                        field:'referred',
                        title:'简称'
                    }
                ],
                treeShowField: 'name',
                parentIdField: 'pid',
                onLoadSuccess: function(data) {
                    $table.treegrid({
                        initialState: 'collapsed',//收缩
                        treeColumn: 1,//指明第几列数据改为树形
                        expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                        expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                        onChange: function() {
                            $table.bootstrapTable('resetWidth');
                        }
                    });
                }
            });
        })
    </script>
</head>
<body>
    <table id="table"></table>
</body>
</html>
三、实现效果


四、下载地址:http://download.csdn.net/download/miss_ll/10204307

需要在webstrom此类软件中才能出现数据哦

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值