2010-11-25 47 views
3

使用行中我不能添加行到jqGrid的表的頂部:jqGrid的「addRowData」到「第一」不工作

jQuery("#myTable").jqGrid('addRowData', 0, myData, "first"); 

它只是添加到列表中像往常一樣

底部

有沒有人試過這個,併爲他們工作?

在我的表,先前添加的行具有從0到N

我使用的jqGrid v3.8.1和jQuery 1.4.3

<html> 
<head> 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 

<script src="js/jquery-1.4.3.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> 
</head> 

<script type="text/javascript"> 

$(document).ready (function(){ 


       jQuery("#myTable").jqGrid({ 
       datatype: "local", 
       colNames:['Data ID','Device' 
          ], 
       colModel:[ 
        {name:'DATA_ID',index:'DATA_ID', sorttype:"int", width:22, align:"center", sortable:false}, 
        {name:'DATA_DN',index:'DATA_DN', width:60, align:"center", sortable:false}, 
        ], 
        width: "1216", 

        }); 

        var myData = [{"DATA_ID":"9", "DATA_DN": "sony"}, {"DATA_ID":"10", "DATA_DN": "panasonic"}]; 
        var newData = [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}]; 

        for(var i=0;i<myData.length;i++) 
        { 
         jQuery("#myTable").jqGrid('addRowData', i, myData[i]); 
        } 

        jQuery("#myTable").addRowData(0, newData, "first"); 

        //jQuery("#myTable").trigger("reloadGrid"); 

}); 
</script> 
</head> 

<body> 
<table id="myTable"></table> 
<div id="myTable_pager"></div> 
</body> 
</html> 

回答

6

很可惜,你不索引發布您使用的完整JavaScript代碼。所以我只能猜測會發生什麼。

例如,如果將myData定義爲數組([...])而不是對象({...}),則位置參數將被值「last」覆蓋。

jqGrid是一個開源項目,您可以檢查addRowData函數here的確切功能。您可以準確瞭解在哪種情況下將使用位置參數「last」。

如果您將問題追加到可用於重現您描述的問題的代碼中,則可以驗證代碼並在jqGrid中查找錯誤或在您的代碼中查找錯誤。在這兩種情況下,你都有可能成爲勝利者。

已更新您發佈的代碼有一些小問題。

首先,您應該在colModel定義中的']'之前刪除逗號。
其次,newData是一個數組,因此最後一個參數將從「first」替換爲「last」。
其他一些小而重要的問題是:您必須在HTML代碼的開頭使用<!DOCTYPE html ...>,將JavaScript代碼放在//<![CDATA[ ... //]]>的內部,並在HTML標頭中插入<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

固定的代碼將是繼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Demonstration how programatically select grid row which are not on the first page</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" /> 
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/css/ui.jqgrid.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/i18n/grid.locale-en.js"></script> 
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/jquery.jqGrid.min.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
     jQuery(document).ready(function() { 
      var grid = jQuery("#myTable"); 
      grid.jqGrid({ 
       datatype: "local", 
       colNames:['Data ID','Device'], 
       colModel:[ 
        {name:'DATA_ID',index:'DATA_ID', sorttype:"int", width:22, align:"center", sortable:false}, 
        {name:'DATA_DN',index:'DATA_DN', width:60, align:"center", sortable:false}, 
       ], 
       width: "1216" 
       }); 

      var myData = [{"DATA_ID":"9", "DATA_DN": "sony"}, {"DATA_ID":"10", "DATA_DN": "panasonic"}]; 
      var newData = [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}]; 

      for(var i=0;i<myData.length;i++) { 
       grid.jqGrid('addRowData', i, myData[i]); 
      } 

      for (i=0;i<newData.length;i++) { 
       grid.jqGrid('addRowData', myData.length+i, newData[newData.length-i-1], "first"); 
      } 
      //grid.trigger("reloadGrid"); 
     }); 
    //]]> 
    </script> 
</head> 
<body> 
    <table id="myTable"><tr><td/></tr></table> 
</body> 
</html> 

也看到它住here。如何使用W3 Validator驗證HTML代碼的最新版本是correct

儘管如此,建議使用額外的隱藏列進行排序。

+0

我已經添加了代碼奧列格 - 傳遞在任何myData作爲[]或{}沒有影響 - 雖然我發現問題 - 這是調用jQuery的( 「#myTable的」)。觸發器( 「reloadGrid」);對數組進行重新排序 - 所以問題在於=我需要重新加載數組,因爲我的分頁器(不在此代碼中)需要使用實際的記錄數進行更新 - 所以現在的問題是,如何添加新的元素和重新加載網格,但行不排序 - 我DID使用colModel中的「sortable:false」標誌... – sami 2010-11-25 20:55:57

+0

或(自言自語)我可以保留一個recieved_time字段,並根據該字段進行排序以便將最新記錄保留在最前面 – sami 2010-11-25 21:05:05

0

的問題是,電網正在裝載,並addRowData通話後排序,將排序網格,按照其排列順序 - 所以不叫reloadGrid調用addRowData後 - 儘管的id該新聞添加的錶行是「未定義」...