Pregunta

¿Alguien puede decirme la estructura XML de los subelementos que utiliza jqgrid? He leído la documentación y no explica claramente cómo se podría crear una vista de árbol con subelementos. Básicamente tengo una cuadrícula de 2 columnas con 3 niveles.

¿Fue útil?

Solución

De la demostración: http://www.trirand.com/jqgrid35/jqgrid.html

(bajo nuevo en la versión 3.3 - > rejilla de árbol)

Hace esta llamada ajax como una publicación: http://www.trirand.com/jqgrid35/server.php?q= árbol

Los parámetros de publicación se ven así:

_search: false
n_left: 1
n_level: 0
n_right: 8
nd: 1241000465087
nodeid: 1
page: 1
rows: 20
sidx    
sord: asc

Que devuelve exactamente esto:

<?xml version='1.0' encoding='utf-8'?>
<rows>
<page>1</page>
<total>1</total>
<records>1</records>
<row><cell>1</cell><cell>Cash</cell><cell>100</cell><cell>400.00</cell<cell>250.00</cell><cell>150.00</cell><cell>0</cell><cell>1</cell><cell>8</cell><cell>false</cell><cell>false</cell></row>
<row><cell>5</cell><cell>Bank's</cell><cell>200</cell><cell>1500.00</cell><cell>1000.00</cell><cell>500.00</cell><cell>0</cell><cell>9</cell><cell>14</cell><cell>false</cell><cell>false</cell></row>
<row><cell>8</cell><cell>Fixed asset</cell><cell>300</cell><cell>0.00</cell<cell>1000.00</cell><cell>-1000.00</cell><cell>0</cell><cell>15</cell><cell>16</cell><cell>true</cell><cell>false</cell></row>
</rows>

Para cada sub fila, realiza otra llamada ajax. La primera & Quot; cell & Quot; El elemento especifica el número de fila. Cuando hay un espacio antes de la siguiente ID de fila, sabe que tiene subelementos y colocará un expansor para esa fila. Cuando el usuario selecciona el expansor, realiza otra llamada ajax y se devuelve lo siguiente:

<?xml version='1.0' encoding='utf-8'?>
<rows>
<page>1</page>
<total>1</total>
<records>1</records>
<row><cell>2</cell><cell>Cash 1</cell><cell>1</cell><cell>300.00</cell><cell>200.00</cell><cell>100.00</cell><cell>1</cell><cell>2</cell><cell>5</cell><cell>false</cell><cell>false</cell></row>
<row><cell>4</cell><cell>Cash 2</cell><cell>2</cell><cell>100.00</cell><cell>50.00</cell><cell>50.00</cell><cell>1</cell><cell>6</cell><cell>7</cell><cell>true</cell><cell>false</cell></row>
</rows>

Mirando la fuente, especifica los nombres de columna, y espera que sean devueltos en orden. Estoy bastante seguro de que puede escribir esto para no esperar un orden en particular, pero así es como se establece la asignación. Esto es más o menos un clon de la forma en que ext hace las cosas, que es una buena manera de seguir porque lo hacen bien .

jQuery("#treegrid").jqGrid({
    url: 'server.php?q=tree',
    treedatatype: "xml",
    mtype: "POST",
    colNames:["id","Account","Acc Num", "Debit", "Credit","Balance"],
    colModel:[
        {name:'id',index:'id', width:1,hidden:true,key:true},
        {name:'name',index:'name', width:180},
        {name:'num',index:'acc_num', width:80, align:"center"},
        {name:'debit',index:'debit', width:80, align:"right"},      
        {name:'credit',index:'credit', width:80,align:"right"},     
        {name:'balance',index:'balance', width:80,align:"right"}        
    ],
    height:'auto',
    pager : jQuery("#ptreegrid"),
    imgpath: gridimgpath,
    treeGrid: true,
    ExpandColumn : 'name',
    caption: "Treegrid example"
});

Y, para completar, vamos a incluir el ejemplo de la fuente de PHP (pasó por tantos problemas, ¡también podría terminarlo!):

$node = (integer)$_REQUEST["nodeid"];
// detect if here we post the data from allready loaded tree
// we can make here other checks
if( $node >0) {
    $n_lft = (integer)$_REQUEST["n_left"];
    $n_rgt = (integer)$_REQUEST["n_right"];
    $n_lvl = (integer)$_REQUEST["n_level"];

    $n_lvl = $n_lvl+1;
    $SQL = "SELECT account_id, name, acc_num, debit, credit, balance, level, lft, rgt FROM accounts WHERE lft > ".$n_lft." AND rgt < ".$n_rgt." AND level = ".$n_lvl." ORDER BY lft";
} else { 
    // initial grid
    $SQL = "SELECT account_id, name, acc_num, debit, credit, balance, level, lft, rgt FROM accounts WHERE level=0 ORDER BY lft";
}
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8"); } else {
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
   echo "<rows>";
echo "<page>1</page>";
echo "<total>1</total>";
echo "<records>1</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    echo "<row>";           
    echo "<cell>". $row[account_id]."</cell>";
    echo "<cell>". $row[name]."</cell>";
    echo "<cell>". $row[acc_num]."</cell>";
    echo "<cell>". $row[debit]."</cell>";
    echo "<cell>". $row[credit]."</cell>";
    echo "<cell>". $row[balance]."</cell>";
    echo "<cell>". $row[level]."</cell>";
    echo "<cell>". $row[lft]."</cell>";
    echo "<cell>". $row[rgt]."</cell>";
    if($row[rgt] == $row[lft]+1) $leaf = 'true';else $leaf='false';
    echo "<cell>".$leaf."</cell>";
    echo "<cell>false</cell>";
    echo "</row>";
}
echo "</rows>";     
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top