jqGrid中的导航栏问题

Question

我的 jqGrid 配置有问题。我正在尝试使用此配置激活导航栏：

$(function(){ 
    $("#list").jqGrid({
        url:'test.xml',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['Name','Last Name', 'Id Nbr'],
        colModel :[ 
           {name:'name', index:'name', width:200}, 
           {name:'lastName', index:'lastName', width:200}, 
           {name:'idnbr', index:'idnbr', width:60}
        ],
        pager: '#pager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'name',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        loadonce: true,
        sortable: true,
        rownumbers: true,
        height: '100%',
        width: '800',
        caption: 'My first grid'
    }); 
}); 
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true});

我的 HTML 代码如下所示：

<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 

我在 Stackoverflow 上阅读了很多关于如何配置导航栏的答案，但我无法在栏中获得我的添加、编辑、删除、查找和刷新按钮，只有页面句柄。

我想知道我的代码是否遗漏了什么，因为我已经尝试获取此按钮但直到现在还没有结果。

提前感谢您的帮助

Answer 1

错误是您调用navGrid 在$(function(){/*it should be here*/}); 之外。因此，该方法不仅会在创建网格之前被调用，而且可能会在<table> 和<page> 元素被放置（加载）到页面上之前发生事件。

只需将navGrid 的调用移到$(function(){/*it should be here*/}); 的上方一行（与$(document).ready(function () {/*the same code inside*/}) 相同，请参阅jQuery.ready），您的代码就会按预期运行。