子项目的jquery树网格(jqgrid)xml结构

Posted

技术标签:

【中文标题】子项目的jquery树网格(jqgrid)xml结构【英文标题】:Jquery tree grid (jqgrid) xml structure for sub-items 【发布时间】:2009-04-29 09:07:42 【问题描述】:

谁能告诉我jqgrid 使用的子项的XML 结构。我已经阅读了文档,但并没有清楚地解释如何创建一个包含子项目的树视图。基本上我有一个 3 层的 2 列网格。

【问题讨论】:

【参考方案1】:

来自演示: http://www.trirand.com/jqgrid35/jqgrid.html

(3.3版新增->树形网格)

它将这个 ajax 调用作为一个帖子: http://www.trirand.com/jqgrid35/server.php?q=tree

帖子参数如下:

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

返回的正是这个:

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

对于每个子行,它都会进行另一个 ajax 调用。第一个“单元格”元素指定行号。当下一行 id 之前有一个间隙时,它知道它有子项,并将为该行放置一个扩展器。当用户选择扩展器时,它会进行另一个 ajax 调用,并返回以下内容:

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

查看源代码,它指定列名,并期望它们按顺序返回。我很确定您可以编写此代码以不期望特定顺序,但这就是设置映射的方式。这几乎是 ext 做事方式的复制品,这是一种很好的遵循方式,因为他们做得很好。

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"
);

并且,为了完整起见,让我们包含 PHP 源代码示例(经历了这么多麻烦,还不如完成它!):

$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>";     

【讨论】:

以上是关于子项目的jquery树网格(jqgrid)xml结构的主要内容,如果未能解决你的问题,请参考以下文章

jqGrid学习笔记

JqGrid学习笔记

jqgrid使用分析

jqgrid使用分析

jqgrid jsonReader 配置

jQuery - jqGrid - 在每一行提交按钮