无法让navgrid在网格上显示

时间:2016-01-24 17:55:28

标签: jqgrid

所以,我正在尝试使用jqGrid,似乎无法显示navgrid。我搜索并尝试过很多东西,但都没有。我不确定发生了什么。任何帮助,将不胜感激。这是我的代码:

        <html>
        <title>User List</title>
        <head>
        <meta charset=UTF-8" />

            <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/js/themes/lightness/jquery-ui.custom.css"></link>  
            <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/css/ui.jqgrid.css"></link> 
            <link rel="stylesheet" type="text/css" media="screen" href="../shared/base.css"  />

            <script src="../../jqgrid/js/jquery-2.2.0.min.js" type="text/javascript"></script>
            <script src="../../jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
            <script src="../../jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>


        </head>

        <body>

            </div>
             <script type="text/javascript">
             $(function () {
                  $('#userGrid').jqGrid({
                      pager:'#userPager',
                      url: 'getUserListData.php',
                      mtype: 'GET',
                      datatype: 'json',
                      colNames:['Rec Id', 'User Id', 'Name', 'eMail', 'Type'],
                      colModel:[
                                {name:'rec_id', hidden: true },
                                {name:'user_id', width: 100, sortable: true, editable: true, search: true },
                                {name:'user_name', sortable: true, editable: true, search: true },
                                {name:'email_address', editable: true },
                                {name:'user_type', width: 60, sortable: true, editable: true, search: true }],

                      viewrecords: true,
                      width: 630,
                      gridview: true,
                      altRows: true,
                      sortname: 'user_name',
                      sortorder: 'asc',
                      rowNum: 10

                 });
             });
              jQuery("#userGrid").jqGrid('navGrid', '#userPager',
                    { add: true, edit: true, del: true });

            </script>

            <table id="userGrid"><tr><td></td></tr></table>
            <div id="userPager"></div>

        </body>
        </html>

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您的代码调用double 阻止move(),这是您问题的根源。结果,您尝试在创建网格之前创建导航栏

解决您需要的问题只需在Attack之内移动navGrid一行的调用。

您应该考虑使用$(function () {...});并删除不需要的隐藏列navGrid。你没有写下你使用的jqGrid版本。

我建议你在$(function () {...});内移动脚本。或者,您可以在 jsonReader: { id: "rec_id" }后移动并移除rec_id阻止。