jqgrid - 從1頁導航到另一頁時loadComplete錯誤

Question

我使用loadComplete事件在jqgrid titlebar和表頭之間插入div元素。

HTML代碼

<div class="userinfo"> 
    <table id="myjqgrid"></table> 
    <div id="Pager"></div>     
    <script src="js/myjqgrid.js" type="text/javascript"></script> 
</div> 

JSON

{ 
    "mypage": { 
     "outerwrapper": { 
      "page":"1", 
      "total":"1", 
      "records":"1", 
      "innerwrapper": { 
       "rows":[ 
        { 
         "id":"1", 
         "cells": 
         [    
          { 
           "value":"12345", 
           "label": "ID"      
          }, 
          { 
           "value":"David", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Smith", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"2", 
         "cells": 
         [    
          { 
           "value":"37546", 
           "label": "ID"      
          }, 
          { 
           "value":"Willy", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Peacock", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"3", 
         "cells": 
         [    
          { 
           "value":"62345", 
           "label": "ID"      
          }, 
          { 
           "value":"Kim", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Holmes", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"4", 
         "cells": 
         [    
          { 
           "value":"186034", 
           "label": "ID"      
          }, 
          { 
           "value":"Andy", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Wills", 
           "label": "LastName"       
          }                      
         ]  
        } 
       ] 
      } 
     } 
    } 
} 

jqGrid的定義（myjqgrid.js）

$(function(){ 
    var getValueByName = function (cells, cellItem) { 
     var i, count = cells.length, item; 
     for (i = 0; i < count; i += 1) { 
      item = cells[i]; 
      if (item.label === cellItem) { 
       return item.value; 
      } 
     } 
     return ''; 
    }; 
    $("#myjqgrid").jqGrid({ 
     url: "myjqgrid.json", 
     datatype: "json", 
     contentType: "application/x-javascript; charset=utf-8", 
     colNames:['ID','FirstName', 'LastName'], 
     colModel:[ 
      {name:'ID',index:'ID',jsonmap:function(obj){return getValueByName(obj.cells, "ID");}, width:150, align:"center"}, 
      {name:'FirstName',index:'FirstName',jsonmap:function(obj){return getValueByName(obj.cells, "FirstName");}, width:150, align:"left", sortable:true}, 
      {name:'LastName',index:'LastName',jsonmap:function(obj){return getValueByName(obj.cells, "LastName");}, width:150, align:"left", sortable:true}   
     ], 
     jsonReader: { 
      root: "mypage.outerwrapper.innerwrapper.rows",   
      page: "mypage.outerwrapper.page", 
      total: "mypage.outerwrapper.total", 
      records: "mypage.outerwrapper.records", 
      repeatitems: false 
     }, 
     rowNum:2, 
     rowList:[2, 4], 
     pager: '#Pager', 
     recordpos: 'left', 
     multiboxonly:true, 
     viewrecords: true, 
     sortorder: "desc", 
     multiselect: true, 
     scrolloffset: 0,  
     loadonce: true,  
     sortable: true, 
     sorttype: "text", 
     cache: true, 
     height: "auto", 
      caption: "MY JQGRID", 
     loadComplete: function(){ 
      $("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar"); 
     } 
    }); 
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'}); 
}); 

問題

額外的div元素正在顯示。但每次我從1頁導航到另一頁時，它會繪製一個額外的div。

• 因此，當頁面加載時，我會得到1 div，其中顯示「表摘要」。
• 然後，我從第1頁導航到第2頁，我收到了2 div元素，它們讀取「表摘要」。
• 我瀏覽從第2頁回到第1頁，我得到那個寫着 '表摘要'

Answer 1

3種div元素您應該更好地利用的jqGrid的

toolbar: [true,"top"] 

參數添加空div。如果您確實需要手動添加潛水，則應將代碼$("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar");從loadComplete中移出。您應該在創建網格之後（$("#myjqgrid").jqGrid({...});之後）放置代碼。