2010-11-25 5 views
3

Ich kann nicht eine Zeile in die Spitze eines jqGrid Tabelle mit der Zeile hinzu:jqGrid „addRowData“ auf „erste“ funktioniert nicht

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

Es kommt noch hinzu, auf der Unterseite der Liste wie gewohnt

Hat jemand das versucht und funktioniert für sie?

In meinem Tisch, zuvor hinzugefügten Zeilen Index, der von 0 bis N geht

I jqGrid v3.8.1 und 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> 

Antwort

6

Es ist schade, bin mit, dass Sie dies nicht tun Veröffentlichen Sie den vollständigen JavaScript-Code, den Sie verwenden. Ich kann also nur raten, was passiert.

Zum Beispiel, wenn Sie definieren myData als Array ([...]) anstelle eines Objekts ({...}) die Positionsparameter mit dem Wert „last“ überschrieben.

jqGrid ist ein Open-Source-Projekt, und Sie können untersuchen, was genau die addRowData Funktion here funktioniert. Sie können genau sehen, in welcher Situation der Positionsparameter "last" verwendet wird.

Wenn Sie Ihre Frage mit dem Code anhängen, der verwendet werden kann, um das Problem zu reproduzieren, das Sie anderen beschreiben, könnte der Code überprüfen und entweder einen Fehler im jqGrid finden oder einen Fehler in Ihrem Code finden. In beiden Situationen haben Sie gute Chancen, ein Gewinner zu sein.

AKTUALISIERT Der Code, den Sie gepostet haben, hat einige kleine Probleme.

Zuerst sollten Sie das Komma vor ']' in der colModel Definition entfernen.
Zweitens ist die newData ein Array, so dass der letzte Parameter von "ersten" zu "letzten" ersetzt wird.
Einige andere kleine, aber wichtige Probleme sind: Sie müssen <!DOCTYPE html ...> am Anfang Ihres HTML-Codes verwenden, den JavaScript-Code innerhalb von //<![CDATA[ ... //]]> einfügen und <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> in den HTML-Header einfügen.

Der feste Code wird folgende

<!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> 

sehe es here leben auch. Wie Sie mit W3 Validator die letzte Version von HTML-Code überprüfen können, ist correct.

Dennoch ist die Verwendung einer zusätzlichen versteckten Spalte, die für die Sortierung verwendet wird, der empfohlene Weg.

+0

Ich habe den Code Oleg hinzugefügt - entweder myData als [] oder {} zu übergeben hat keinen Unterschied gemacht - obwohl ich das Problem gefunden habe - es ist der Aufruf an jQuery ("# ​​meineTabelle").trigger ("reloadGrid"); dass neu ordnet das Array - so ist das Problem mit dem = Ich brauche das Array, da meinen Pager (nicht in diesem Code) neu geladen werden muss mit der tatsächlichen Anzahl der Datensätze aktualisiert werden - so die Frage ist nun, wie kann ich hinzufügen, neue Elemente und das Gitter neu geladen, aber die Zeilen sortiert werden nicht - ich den „sortierbar: false“ verwendet DID-Flag im colModel ... – sami

+0

Or (im Gespräch mit mir) ich ein recieved_time Feld halten konnte und es auf der Grundlage, dass sortieren so dass meine neuesten Aufzeichnungen oben zu halten, wie – sami

+0

@sami Wünsche offen: Die Verwendung von recieved_time Feld zum Sortieren ein guter Weg ist, aber es ist notwendig, nachdem 'jQuery („# myTable“) Trigger („reloadGrid“);. '. Sie können die Zeile an beliebiger Stelle mit dem von mir geposteten Code hinzufügen. – Oleg

0

Das Problem war, dass das Gitter neu geladen wurde und sortiert nach dem addRowData Anruf und es würde das Gitter nach ihrer Sortierreihenfolge sortiert werden - so rufen Sie nicht reloadGrid nach Aufruf addRowData - obwohl die id die neu hinzugefügten Tabellenzeilen sind "undefiniert" ...

+0

Sie haben Recht ergänzt. Wenn Sie also 'reloadGrid' verwenden, sollten Sie eine versteckte Spalte wie" orderNumber "definieren, die verwendet wird, um die Daten in Ihrer bevorzugten Reihenfolge zu speichern. Eine weitere Bemerkung: Es ist besser, alle zusätzlichen Informationen an Ihre Frage anzufügen, um sie in Ihre eigene Antwort zu schreiben, weil solche Antworten oft nicht gelesen werden. – Oleg

Verwandte Themen