jqGrid « addRowData » à « premier » ne je travaille

ne peux pas ajouter une ligne au sommet d'une table jqGrid en utilisant la ligne:jqGrid « addRowData » à « premier » ne je travaille

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

Il ajoute juste au bas de la liste, comme d'habitude

Est-ce que quelqu'un a essayé cela et travaille pour eux?

Dans ma table, les lignes précédemment ajoutés ont l'index qui va de 0 à N

J'utilise jqGrid v3.8.1 et 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>

Source

2010-11-25 sami

Il est dommage que vous ne publiez le code JavaScript complet que vous utilisez. Donc je ne peux que deviner ce qui se passe.

Par exemple, si vous définissez myData comme un tableau ([...]) au lieu d'un objet ({...}) le paramètre de position sera remplacée par la valeur « dernier ». JqGrid est un projet open source et vous pouvez examiner ce que fait exactement addRowDatahere. Vous pouvez voir exactement dans quelle situation le paramètre de position "last" sera utilisé. Si vous ajoutez votre question avec le code qui peut être utilisé pour reproduire le problème que vous décrivez, d'autres pourraient vérifier le code et trouver un bogue dans le jqGrid ou trouver un bogue dans votre code. Dans les deux cas, vous avez de bonnes chances d'être un gagnant.

MISE À JOUR Le code que vous avez publié a quelques petits problèmes.

D'abord, vous devez supprimer la virgule avant ']' dans la définition colModel.
Ensuite, le newData est un tableau de sorte que le dernier paramètre sera remplacé de "premier" à "dernier".
Quelques autres petits mais importants problèmes sont: vous devez utiliser <!DOCTYPE html ...> au début de votre code HTML, placez le code JavaScript à l'intérieur de //<![CDATA[ ... //]]> et insérez <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> dans l'en-tête HTML.

Le code fixe suivra

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

voir aussi vivre here. Comment vous pouvez vérifier avec W3 Validator la dernière version du code HTML est correct.

Néanmoins, l'utilisation d'une colonne cachée supplémentaire qui sera utilisée pour le tri est recommandée.

Source

2010-11-25 20:02:59 Oleg

J'ai ajouté le code Oleg - passer myData comme [] ou {} n'a pas fait de différence - même si j'ai trouvé le problème - c'est l'appel à jQuery ("# myTable").trigger ("reloadGrid"); qui réordonne le tableau - donc le problème est avec cela = J'ai besoin de recharger le tableau car mon pager (pas dans ce code) doit être mis à jour avec le nombre réel d'enregistrements - la question est maintenant, comment puis-je ajouter de nouvelles éléments ET recharger la grille mais les lignes ne sont pas triées - J'ai utilisé le drapeau "sortable: false" dans le colModel ... – sami

Ou (en me parlant) Je pourrais garder un champ recieved_time et le trier sur la base de cela pour que mes derniers enregistrements restent au top, comme vous le souhaitez – sami

@sami: L'utilisation du champ recieved_time utilisé pour le tri est un bon moyen, mais il est nécessaire après 'jQuery (" # myTable "). trigger (" reloadGrid "); '. Vous pouvez ajouter la ligne à n'importe quel endroit où vous voulez avec le code que j'ai posté. – Oleg

Le problème était que la grille était rechargée et triée après la addRowData appel et il trierait la grille selon son ordre de tri - donc ne pas appeler reloadGrid après avoir appelé addRowData - si l'id les lignes de table ajoutées aux nouvelles sont "indéfinies" ...

Source

2010-11-25 21:01:37 sami

Vous avez raison. Donc, si vous utilisez 'reloadGrid' à tout moment vous devriez définir une colonne cachée comme" orderNumber "qui sera utilisée pour contenir les données dans votre ordre préféré. Une remarque de plus: il est préférable d'ajouter toutes les informations supplémentaires à votre question afin de l'écrire dans votre propre réponse car de telles réponses ne seront souvent pas lues. – Oleg

jqGrid « addRowData » à « premier » ne je travaille

Répondre

Questions connexes