free-jqgrid 寻呼机不正确

Question

多年来我一直在使用免费的 jqGrid。奇怪的是，今天我正在为一位同事设置一个简单的模板，这只是一个奇怪的问题。寻呼机以非常大的高度呈现。我将 post 我的代码放在何处并查看随附的屏幕截图。

<html>
    <head>
        <!-- jQuery -->
        <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

        <!-- jquery-ui -->
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

        <!-- jqGrid -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/css/ui.jqgrid.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/jquery.jqgrid.min.js"></script>
    </head>
    <body>
        <!-- this is the HTML element for the grid UI -->
        <div>
            <table id="grid"></table>
        </div>

        <script type="text/javascript">

        /*
         * Everything inside this function is called after page is done loading
         */
        jQuery(function($){

            /*
             * This is how we setup and configure the grid
             * match the ID of the HTML element with CSS style selector
             */
            $('#grid').jqGrid({
                url:'/phpAJAX/Master/master_grid_v1.php',  //url of data script
                width: 500,
                height: 300,
                datatype: 'xml',
                mtype: 'POST',
                postData:{
                    'arg1':'marks_jqgrid_example'  //tells the script it your database
                },
                colNames:[ //number of column names has to match number of colModel fields
                    'id',
                    'String field (field1)',
                    'Integer Field (field2)'
                ],
                colModel:[  //this is the main setup for each field
                    {name: 'id', hidden: true },
                    {name: 'field1', editable: true },
                    {name: 'field2', editable:true }
                ],
                sortname: 'field1', //the name of the sort field
                sortorder: 'asc', //ascending or descending
                caption: 'Flats or Plates Available',
                pager: true,
                gridview: true,
                onSelectRow: function(id){
                    //do something special when you select a row
                    return;
                },
                rowNum: 10,  //how many rows to show
            })

        })

        </script>
    </body>
</html>

看起来 table 和 class ui-pg-table 的 height: 100% 样式导致了问题。如果我删除它，那么寻呼机的高度 returns 达到预期。

Answer 1

您应该验证文档以

开头

<!DOCTYPE html>

在 <html> 元素之前。

free-jqgrid 寻呼机不正确

free-jqgrid pager not fitting correctly

jquery

jquery-ui

jqgrid

free-jqgrid