jQuery EasyUI 数据网格 - 创建子网格

使用数据网格（datagrid）的详细视图，用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细，子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。

步骤 1：创建主网格


<table id="dg" style="width:700px;height:250px"
        url="datagrid22_getdata.php" 
        title="DataGrid - SubGrid"
        singleSelect="true" fitColumns="true">
    <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="100">Product ID</th>
            <th field="listprice" align="right" width="80">List Price</th>
            <th field="unitcost" align="right" width="80">Unit Cost</th>
            <th field="attr1" width="220">Attribute</th>
            <th field="status" width="60" align="center">Status</th>
        </tr>
    </thead>
</table>

步骤 2：设置详细视图来显示子网格

为了使用详细视图，请记得在页面头部引用视图脚本文件。


<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>


$(&qpos;#dg&qpos;).datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return &qpos;<div style="padding:2px"><table class="ddv"></table></div>&qpos;;
    },
    onExpandRow: function(index,row){
        var ddv = $(this).datagrid(&qpos;getRowDetail&qpos;,index).find(&qpos;table.ddv&qpos;);
        ddv.datagrid({
            url:&qpos;datagrid22_getdetail.php?itemid=&qpos;+row.itemid,
            fitColumns:true,
            singleSelect:true,
            rownumbers:true,
            loadMsg:&qpos;&qpos;,
            height:&qpos;auto&qpos;,
            columns:[[
                {field:&qpos;orderid&qpos;,title:&qpos;Order ID&qpos;,width:100},
                {field:&qpos;quantity&qpos;,title:&qpos;Quantity&qpos;,width:100},
                {field:&qpos;unitprice&qpos;,title:&qpos;Unit Price&qpos;,width:100}
            ]],
            onResize:function(){
                $(&qpos;#dg&qpos;).datagrid(&qpos;fixDetailRowHeight&qpos;,index);
            },
            onLoadSuccess:function(){
                setTimeout(function(){
                    $(&qpos;#dg&qpos;).datagrid(&qpos;fixDetailRowHeight&qpos;,index);
                },0);
            }
        });
        $(&qpos;#dg&qpos;).datagrid(&qpos;fixDetailRowHeight&qpos;,index);
    }
});

当用户点击展开按钮（&qpos;+&qpos;）时，&qpos;onExpandRow&qpos; 事件将被触发。我们创建一个新的带有三列的子网格。当子网格数据加载成功时或者改变尺寸大小时，请记得对主网格调用 &qpos;fixDetailRowHeight&qpos; 方法。

步骤 3：服务器端代码

datagrid22_getdata.php


$result = array();

include &qpos;conn.php&qpos;;

$rs = mysql_query("select * from item where itemid in (select itemid from lineitem)");

$items = array();
while($row = mysql_fetch_object($rs)){
    array_push($items, $row);
}

echo json_encode($items);

datagrid22_getdetail.php


include &qpos;conn.php&qpos;;

$itemid = mysql_real_escape_string($_REQUEST[&qpos;itemid&qpos;]);

$rs = mysql_query("select * from lineitem where itemid=&qpos;$itemid&qpos;");
$items = array();
while($row = mysql_fetch_object($rs)){
    array_push($items, $row);
}
echo json_encode($items);

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid22.zip