Forum
Log In
Home
Topic RSS
15:39
12/11/2013
Offline
I have this code but the first time I load the grid data are not sorted. Arfer this if I do click in the header of the column the sort runs good.
<!DOCTYPE html>
<html>
<head>
<title>MAPA VERSION 2.2</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<!--Hojas de estilos que implementan la funcionalidad del grid-->
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" href="css/ui.jqgrid.css">
<!--Ficheros javascript que implementan la funcionalidad del grid-->
<script src="js/jquery.js" ></script>
<script src="js/grid.locale-es.js" ></script>
<script src="js/jquery.jqGrid.min.js" ></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
//definimos el vector JSON que va a formar la tabla inicial. Tiene campos especiales para poder construir el arbol
//esos campos especiales son los que van a partir del campo relevancias
//Datos del arbol inicial con los contadores de registros y sumas de relevancias
var mydata = [
{ nodo:"ANALITICA", registros:"9", relevancias:"250.10",
level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },
{ nodo:"2013", registros:"5", relevancias:"175.00",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },
{ nodo:"2010", registros:"3", relevancias:"50.10",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },
{nodo:"2000", registros:"1",relevancias:"25.00",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },
{ nodo:"RADIOLOGIA", registros:"3", relevancias:"25.15",
level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },
{ nodo:"2013", registros:"1", relevancias:"14.00",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ nodo:"2008", registros:"2", relevancias:"11.15",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ nodo:"PRUEBAS ESPECIALES", registros:"4", relevancias:"100.00",
level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },
{ nodo:"2013", registros:"1", relevancias:"25.00",
level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },
{ nodo:"2011", registros:"1", relevancias:"25.00",
level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },
{ nodo:"2012", registros:"1", relevancias:"25.00",
level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },
{ nodo:"2010", registros:"1", relevancias:"25.00",
level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true }
];
jQuery("#lista").jqGrid({
datatype: "jsonstring",
datastr: mydata,
colNames: ["Elemento", "Registros", "Relevancias"],
colModel: [
{name: 'nodo', index: 'nodo', width: 200, },
{name: 'registros', index: 'registros', width: 200, sortable:'false', align:'right'},
{name: 'relevancias', index: 'relevancias', width: 200, sortable:'false', align:'right'}
],
height: 'auto',
rowNum: 10000,
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'nodo',
sortable:true,
pager: "#plista",
toppager:true,
viewrecords: true,
caption: 'MAPA VERSION 2.2',
pgtext:null,
recordtext:'{2} registros de ' + mydata.length,
});
//jQuery("#lista").jqGrid('filterToolbar',{searchOperators : true});
//habilitamos la barra de navegación y paginacion en el pie de tabla
jQuery("#lista").jqGrid('navGrid','#plista',{del:false,add:false,edit:false,search:false,refresh:false,cloneToTop:true});
//añadimos el boton de expandir todo en la barra de navegacion inferior
jQuery("#lista").jqGrid('navButtonAdd', '#plista', { caption: "Expandir todo",
onClickButton: function() {
$("#lista .ui-icon-triangle-1-e").trigger("click");
}
});
//añadimos el boton de contraer todo en la barra de navegación inferior
jQuery("#lista").jqGrid('navButtonAdd', '#plista', { caption: "Contraer todo",
onClickButton: function() {
$("#lista .ui-icon-triangle-1-s").trigger("click");
}
});
//añadimos el boton de expandir todo en la barra de navegacion superior
jQuery("#lista").jqGrid('navButtonAdd', '#lista_toppager', { caption: "Expandir todo",
onClickButton: function() {
$("#lista .ui-icon-triangle-1-e").trigger("click");
}
});
//añadimos el boton de contraer todo en la barra de navegación superior
jQuery("#lista").jqGrid('navButtonAdd', '#lista_toppager', { caption: "Contraer todo",
onClickButton: function() {
$("#lista .ui-icon-triangle-1-s").trigger("click");
}
});
});
</script>
</head>
<body>
<table id="lista"><tr><td/></tr></table>
<div id="plista"></div>
</body>
</html>
Thank you,
08:59
Moderators
30/10/2007
Offline
Hello,
You use jsonstring as data. In this case jqGrid expect that the initial data is sorted in appropriate way.
This is the same case as you use data from server - i.e the data should be sorted before it is send to the grid.
In order to solve the problem you can programatically use the sortGrid method to sort the data in a way you want.
Of course you will need to wait until the data is loaded in the grid and then sort it.
See docs.
Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
60 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
