插件bootstrap-table的treegrid

之前做项目的时候有涉略过这一块，要写一个有层级分类的表格，因此想到了bootstrap-table，只能说这是一个很好用的框架；

之前看文档的时候一脸懵，根本无从下手，但后来仔细一看，其实很简单嘛！并没有想象中那么夸张，只要细心。

bootstrap-table官网：http://issues.wenzhixin.net.cn/bootstrap-table/index.html（好像是被屏蔽了，要翻墙才能打开，我这里用的是蓝灯lantern）

里面有很多例子跟方法并在git上也有源码，我这里先写一个简单的bootstrap-table-treegrid表格

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table-develop/src/bootstrap-table.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
    <script src="assets/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="bootstrap-table-develop/src/extensions/treegrid/bootstrap-table-treegrid.js"></script>
    <script src="bootstrap-table-develop/src/extensions/treegrid/jquery.treegrid.min.js"></script>
</head>
<body>
<table id="table"></table>
</body>
<script type="text/javascript">
    var $table = $('#table');
    $(function() {
        $table.bootstrapTable({
            url: 'bootstrap-table-develop/treegrid.json',
            height: $(window).height(),
            striped: true,
            sidePagination: 'server',
            idField: 'id',
            columns: [
                {
                    field: 'ck',
                    checkbox: true
                },
                {
                    field: 'name',
                    title: '分类id',
                },
                {
                    field: 'permissionValue',
                    title: '分类名称',
                    sortable: true,
                    align: 'center',
                },
                {
                    field:'button',
                    title:'操作',
                    events:'operateEvents',
                    formatter:'Editor'

                }
            ],
            onClickRow: function (row, $element) {
                curRow = row;
            },
            treeShowField: 'name',
            parentIdField: 'pid',
            onLoadSuccess: function(data) {
                console.log('load');
                $table.treegrid({
                    treeColumn: 1,
                    onChange: function() {
                        $table.bootstrapTable('resetWidth');
                    }
                });
            }
        });
    });  
    //操作列
    function Editor(value,row,index) {
        return[
            '<button id="TableEditor"  type="button" class="btn btn-default">编辑</button>&nbsp;&nbsp;',
            '<button id="TableDelete"  type="button" class="btn btn-default">删除</button>'
        ].join("")
    }
    window.operateEvents={
        "click #TableEditor":function (e,value,row,index){ 
        },
        "click #TableDelete":function (e,value,row,index){
             $(this).parent().parent().remove();
        }
    }

</script>


</html>

代码很简单，然后我把json也放出来

[
    {
      "id": 1,
      "pid": 0,
      "name": "系统管理",
      "permissionValue": "open:system:get"
    },
    {
      "id": 2,
      "pid": 0,
      "name": "字典管理",
      "permissionValue": "open:dict:get"
    },
    {
      "id": 20,
      "pid": 1,
      "name": "新增系统",
      "permissionValue": "open:system:add"
    },
    {
      "id": 21,
      "pid": 1,
      "name": "编辑系统",
      "permissionValue": "open:system:edit"
    },
    {
      "id": 22,
      "pid": 1,
      "name": "删除系统",
      "permissionValue": "open:system:delete"
    },
    {
      "id": 33,
      "pid": 2,
      "name": "系统环境",
      "permissionValue": "open:env:get"
    },
    {
      "id": 333,
      "pid": 33,
      "name": "新增环境",
      "permissionValue": "open:env:add"
    },
    {
      "id": 3333,
      "pid": 33,
      "name": "编辑环境",
      "permissionValue": "open:env:edit"
    },
    {
      "id": 233332,
      "pid": 33,
      "name": "删除环境",
      "permissionValue": "open:env:delete"
    }
]

其实这个在Git上可以直接下载，我的在案例基础上加了个操作列；希望对一些刚接触bootstrap-table的人有帮助

插件bootstrap-table的treegrid

猜你喜欢