simple-yewu/frontend/views/menu/index.php

<?php
use \common\libs\MyLib;
?>);
<?php $this->beginBlock('header_css'); ?>
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<?php $this->endBlock(); ?>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>菜单管理</h5>
            <div class="ibox-tools">
                <a class="btn btn-primary btn-xs edit-btn" data-id="0" href="javascript:void(0);" onclick="create(0)">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary btn-xs edit-btn" data-id="0" href="javascript:void(0);" onclick="$('#listTable').bootstrapTable('refresh');">
                    <i class="fa fa-refresh"></i> 刷新
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <table id="listTable" class="table table-bordered" id="table" data-toggle="table" data-height="689">
                        <thead class="bg-warning">
                        <tr>
                            <th data-field="show_id">ID</th>
                            <th data-field="name">菜单名称</th>
                            <th data-field="icon">图标</th>
                            <th data-field="path">路径</th>
                            <th data-field="order_id">排序</th>
                            <th data-formatter="opFormatter">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<?php $this->beginBlock('footer_js'); ?>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    function opFormatter(value, row, index) {
        var opStr = [];
        opStr.push('<a href="javascript:void(0);" onclick="subcreate(' + row.id + ')">');
        opStr.push('<i class="fa fa-folder-open" title="子菜单"></i>');
        opStr.push('</a>');
        opStr.push('<a href="javascript:void(0);" onclick="edit(' + row.id + ')">');
        opStr.push('<i class="fa fa-edit" title="编辑"></i>');
        opStr.push('</a>');
        opStr.push('<a href="javascript:void(0);" onclick="del(' + row.id + ')">');
        opStr.push('<i class="fa fa-trash" title="删除"></i>');
        opStr.push('</a>');

        return opStr.join(' ');
    }
    function subcreate(id) {
        var title = '新增菜单';
        layer_show(title, '/menu/edit?parent_id=' + id);
    }
    function create() {
        title = '新增菜单';
        layer_show(title, '/menu/edit?id=0');
    }
    function edit(id) {
        var title = '编辑菜单';
        layer_show(title, '/menu/edit?id=' + id);
    }
    function del(id) {
        parent.layer.confirm('是否确认删除？', {
            btn: ['删除','取消'], //按钮
            shade: false //不显示遮罩
        }, function(){
            $.post('/menu/delete',{id:id},function(data) {
                parent.layer.msg(data.msg);
                refreshList();
            }, 'json');
        }, function(){
            //
        });
    }
    function refreshList() {
        $('#listTable').bootstrapTable('refresh');
    }

    function search() {
        $('#listTable').bootstrapTable('destroy');
        $('#listTable').bootstrapTable({
            url: "/menu/index-json",
            pagination: false,
            sidePagination: 'server',
            queryParams: function(params) {
                return params;
            }
        });
    }

    //使得table有一定的高度，出现滚动条
        function table(){
             //获取body高度
             var a=$(".gray-bg").height();
             //获取条件选择高度
             var b=$('#searchFrm').height();
             //获取标题高度
             var c=$('.ibox-title').height();
             //获取table高度
             var e=$("#listTable").height();
             var f=$(".ibox-content").height();
             var d=a-c-100;
             console.log(e);
             console.log(f);
             //$('.fixed-table-body').css({'height':d});
        }
    $(function() {
        search();
        var tab=$("#listTable").attr('data-height');
        $('.fixed-table-body').css({'height':tab-40});
    });
</script>
<?php $this->endBlock(); ?>