JQGrid空网格，没有导航或编辑图标

Question

由于某种原因，我的网格是空白的，没有行（甚至没有空行），没有导航图标和编辑图标。我使用了一些附加功能，如自动填充字段（网格内）和字体调整脚本，以便我的脚本有点长。该页面正在从我的函数页面接收格式正确的响应，并且它似乎与我的jsonReader设置相匹配，但它没有用它填充网格。下面是从页我的JSON格式的响应：

{"page":"1", 
"total":1, 
"records":"4", 
"rows":[{"DetailID":"1","Quantity":"2","TaskName":"Differencial With Housing","UnitPrice":"335.00","ExtendedPrice":"670.00"}, {"DetailID":"2","Quantity":"1","TaskName":"Left axel seal","UnitPrice":"15.00","ExtendedPrice":"15.00"},{"DetailID":"3","Quantity":"1","TaskName":"Upper and Lower Bearings","UnitPrice":"55.00","ExtendedPrice":"55.00"}, {"DetailID":"5","Quantity":"1","TaskName":"Fluids","UnitPrice":"45.00","ExtendedPrice":"45.00"}]} 

，这里是我的网脚本：

<script>  
    function autocomplete_element(value, options) { 
     var $ac = $('<input type="text"/>'); 
     $ac.val(value); 
     $ac.autocomplete({source: "autocomplete.php?method=fnAutocomplete"}); 
     return $ac; 
    } 
    function autocomplete_value(elem, op, value) { 
     if (op == "set") { 
     $(elem).val(value); 
     } 
     return $(elem).val(); 
    } 
     $(document).ready(function() 
      { 
       $('#filter').jqm(); 
       var selectedRow = 0;     
       $("#list").jqGrid(
       { 
        url:'managegrid.php', 
        datatype: 'json', 
        colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'], 
        colModel :[ 
         {name:'DetailID', index:'DetailID', hidden:true, editable:false}, 
         {name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true}, 
         {name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}}, 
         {name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},       
         {name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'}, 
         {name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'} 
        ], 
        onSelectRow: function(id){ 
         if(DetailID && DetailID!==mkinline){ 
         jQuery('#list').saveRow(mkinline); 
         jQuery('#list').editRow(DetailID,true); 
         mkinline=DetailID; 
         } 
        }, 
        pager: $('#pager'), 
        rowNum:20, 
        rowList:[], 
        pgbuttons: false, 
        pgtext: null, 
        sortorder: "asc", 
        sortname: "DetailID", 
        viewrecords: true, 
        imgpath: '/js/jquery/css/start/images', 
        caption: 'Project Details', 
        height:'auto', 
        width:823, 
        mtype:'GET', 
        recordtext:'', 
        pgtext:'', 
        editurl:"editgrid.php", 
        toolbar:[true,"bottom"], 
        loadComplete:function(){ 
          var recorddata = $("#list").getUserData(); 
          $("#t_list").html(recorddata.MSG); 
         }, 
        jsonReader: { 
         page: "PAGE", 
         total: "TOTAL", 
         records:"RECORDS", 
         root: "ROWS", 
         userdata:"USERDATA" 
         } 
        } 
       ); 
       $("#t_list").css("color","blue"); 
       jQuery("#list").jqGrid("inlineNav",'#pager',{edit:true,editicon: "ui-icon-pencil",add:true,addicon: "ui-icon-plus",search:false}, {}, {}, 
       {url:"delgridrow.php",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"}) 
       .navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id) 
        { 
         resetForm();    
         $("#list").setGridParam(
          { 
           url:"managegrid.php", 
           page:1 
          } 
         ).trigger("reloadGrid"); 
        } 
       });   
      }  
     ); 
    function gridSearch() 
    { 
     var pid = $("#DetailID").val(); 
     var qty = $("#Quantity").val(); 
     var tn = $("#TaskName").val(); 
     var up = $("#UnitPrice").val(); 
     $("#list").setGridParam(
      { 
       url:"managegrid.php?ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up, 
       page:1 
      } 
      ).trigger("reloadGrid"); 
     $("#filter").jqmHide(); 
     return false 
    } 
    function commonSubmit(data,params) 
    { 
     var a = eval("(" + data.responseText + ")"); 
     $("#t_list").html(a.USERDATA.MSG); 
     resetForm(); 
     return true; 
    } function resetForm() 
    { 
     window.location.reload(false); 
    } 
</script> 

我一直在试图周末都明白这一个出来，它的驾驶我疯了，所以任何帮助将不胜感激。

Answer 1

你应该直接调用的inlineNav前添加的代码

jQuery("#list").jqGrid("navGrid", '#pager', 
    {add: false, edit: false, del: false, search: false, refresh: false}); 

行。

已更新：您的代码也有许多其他问题。例如，您应该从代码中删除jsonReader选项，因为它包含错误的属性值（如root: "ROWS"而不是root: "rows"，这是默认值，可以删除）。您可以考虑使用jsonReader: { id: 'DetailID' }将DetailID的值用作rowid，并在编辑期间使用DetailID而不是id。我建议您在使用之前定义所有变量（例如，参见mkinline和DetailID）。