githab
/
bootstrap-table


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!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="../../bootstrap-table.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
</head>
<body>
	<table id="table"></table>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../../bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script src="./bootstrap-table-treegrid.js"></script>
<script type="text/javascript">
    var $table = $('#table');
    $(function () {
        $table.bootstrapTable({
			url: 'data.json',
            height: $(window).height(),
            striped: true,
            showRefresh: true,
            showColumns: true,
            sidePagination: 'server',
            // detailView: true,
            // detailFormatter: 'detailFormatter',
            silentSort: false,
            escape: true,
            search: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            responseHandler: function (res){
                console.log(res);
			    return res;
			},
            columns: [
                {field: 'ck', checkbox: 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',
            onLoadSuccess: 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');
                    }
                });
            }
            // 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>
</html>