2010-11-25 49 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该新闻添加的表行是“未定义”...