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）。