bootstrapTable

<div class="box-body table-responsive no-padding" style="overflow-x:hidden">
                  <table class="table table-bordered table-hover table-text" id="menutable">

                  </table>
                </div><!-- /.box-body -->

 

$(function() {
        $("#menutable").bootstrapTable({
            url: '${ctx }/system/menu/findMainMenu',
            method: 'get',
            detailView: true,//父子表
            pagination:true,  //显示分页
            //search: true,
            //sidePagination: "server",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                field: 'menuname',
                title: '菜单名称'
            }, {
                field: 'url',
                title: '菜单URL'
            }, {
                field: 'parentremenuname',
                title: '父级菜单'
            }, {
                field: 'menutype',
                title: '菜单类型',
                formatter:function(value,row,index){
                    var e = '顶部菜单';
                    return e;}
            }, {
                field: 'memo',
                title: '说明'
            }, {
                field: 'id',
                title: '操作',
                formatter:function(value,row,index){
                           var e = '<a href="#" mce_href="#" onclick="updatemenu(\''+ row.id + '\')" title="编辑"><i class="fa fa-pencil text-primary"></i></a> ';
                           var d = '<a href="#" mce_href="#" onclick="deletemenu(\''+ row.id +'\')" title="删除"><i class="fa fa-trash text-primary"></i></a> ';
                           return e+d;}
            }, ],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                childern(index, row, $detail);
            }
        });
    });
    
    //初始化子表格(无线循环)
    function childern(index, row, $detail) {
        var parentid = row.id;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '${ctx }/system/menu/findChildrenMenu',
            method: 'get',
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            detailView: true,//父子表
            //search: true,
            uniqueId: "id",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                field: 'menuname',
                title: '菜单名称'
            }, {
                field: 'url',
                title: '菜单URL'
            }, {
                field: 'parentremenuname',
                title: '父级菜单'
            }, {
                field: 'menutype',
                title: '菜单级别',
                formatter:function(value,row,index){
                    var e = '左部菜单';
                    return e;}
            }, {
                field: 'memo',
                title: '说明'
            }, {
                field: 'id',
                title: '操作',
                formatter:function(value,row,index){
                           var e = '<a href="#" mce_href="#" onclick="updatemenu(\''+ row.id + '\')" title="编辑"><i class="fa fa-pencil text-primary"></i></a> ';
                           var d = '<a href="#" mce_href="#" onclick="deletemenu(\''+ row.id +'\')" title="删除"><i class="fa fa-trash text-primary"></i></a> ';
                           return e+d;}
            }, ],
            //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                childern(index, row, $Subdetail);
            }
        });
    };