jqGrid中悬浮窗不显示按钮的解决方法

jqGrid中悬浮窗不显示按钮的解决方法

最近用前端模板用到了JQuery中的jqGrid，似乎是非常棒的前台表格控件，但上手也有一定难度，bug相对不容易排查，下面就列出该控件中，悬浮表格不能正确显示按钮的可能问题：

遇到的问题

在资源引入以及以及本身代码都没有问题的情况下，悬浮框的提交和取消按钮不能正确显示

 // Setup buttons
        $("#table").jqGrid('navGrid', '#pager',
            {edit: true, add: true, del: true, search: true},
            {height: 200, reloadAfterSubmit: true}
        );

解决的方法

这个原因相对玄学，即当设置该悬浮窗高度低于里面内容高度时，按钮会被自动隐藏，注意下面修改了height的值：

// Setup buttons
        $("#table").jqGrid('navGrid', '#pager',
            {edit: true, add: true, del: true, search: true},
            {height: 400, reloadAfterSubmit: true}
        );

此时按钮就可以被显示了。

叨叨

​ 这种问题虽然看起来很简单，但是却根本找不到发生的原因（网上也无），我查了一下午文档最后还是用直觉排查出来的问题，希望看到这篇文章的你们能少走弯路。

​ 最后贴出表格的前端js代码和运行截图：

<script>
    $(document).ready( function(){
        tableInit();
    });
    function tableInit(){
        $("#table").jqGrid({
            //postData: {"method":"query"},
            url:"/admin.do?method=query",
            datatype: "json",
            height: 450,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 20, 30],
            colNames:['教师号','姓名','邮箱','教师等级','性别','年龄','配额','专业号','研究方向'],
            colModel:[
                {name:'tno',index:'tno', editable: true, width:60,search:true},
                {name:'name',index:'name', editable: true, width:90,search:true},
                {name:'email',index:'email', editable: true, width:100,search:true},
                {name:'level',index:'level', editable: true, width:100,search:true},
                {name:'sex',index:'sex', editable: true, width:100,search:true},
                {name:'age',index:'age', editable: true, width:100,search:true},
                {name:'quota',index:'quota', editable: true, width:100,search:true},
                {name:'major_no',index:'majorNo', editable: true, width:100,search:true},
                {name:'task',index:'task', editable: true, width:100,search:true},
            ],
            pager: "#pager",
            viewrecords: true,
            caption: "标签表",
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            hidegrid: false,
            editurl:"/admin.do?method=edit",
        });

        // Add selection
        $("#table").setSelection(4, true);

        // Setup buttons
        $("#table").jqGrid('navGrid', '#pager',
            {edit: true, add: true, del: true, search: true},
            {height: 400, reloadAfterSubmit: true}
        );

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            $('#table').setGridWidth(width);
        });

        setTimeout(function(){
            $('.wrapper-content').removeClass('animated fadeInRight');
        },700);
    };

</script>

运行截图：