jEasyUI 擴(kuò)展行顯示細(xì)節(jié)

數(shù)據(jù)網(wǎng)格（datagrid）可以改變它的視圖（view）來顯示不同的效果。使用詳細(xì)視圖，數(shù)據(jù)網(wǎng)格（datagrid）可以在數(shù)據(jù)行的左邊顯示展開按鈕（"+" 或者 "-"）。用戶可以展開行來顯示附加的詳細(xì)信息。

步驟 1：創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）

????<table id="dg" style="width:500px;height:250px"
????????????url="datagrid8_getdata.php"
????????????pagination="true" sortName="itemid" sortOrder="desc"
????????????title="DataGrid - Expand Row"
????????????singleSelect="true" fitColumns="true">
????????<thead>
????????????<tr>
????????????????<th field="itemid" width="60">Item ID</th>
????????????????<th field="productid" width="80">Product ID</th>
????????????????<th field="listprice" align="right" width="70">List Price</th>
????????????????<th field="unitcost" align="right" width="70">Unit Cost</th>
????????????????<th field="status" width="50" align="center">Status</th>
????????????</tr>
????????</thead>
????</table>

步驟 2：為數(shù)據(jù)網(wǎng)格（DataGrid）設(shè)置詳細(xì)視圖

為了使用詳細(xì)視圖，請(qǐng)記得在頁面頭部引用視圖腳本文件。

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

$('#dg').datagrid({
????view: detailview,
????detailFormatter:function(index,row){
????????return '<div class="ddv" style="padding:5px 0"></div>';
????},
????onExpandRow: function(index,row){
????????var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
????????ddv.panel({
????????????border:false,
????????????cache:false,
????????????href:'datagrid21_getdetail.php?itemid='+row.itemid,
????????????onLoad:function(){
????????????????$('#dg').datagrid('fixDetailRowHeight',index);
????????????}
????????});
????????$('#dg').datagrid('fixDetailRowHeight',index);
????}
});

我們定義 'detailFormatter' 函數(shù)，告訴數(shù)據(jù)網(wǎng)格（datagrid）如何渲染詳細(xì)視圖。在這種情況下,我們返回一個(gè)簡(jiǎn)單的 '<div>' 元素，它將充當(dāng)詳細(xì)內(nèi)容的容器。請(qǐng)注意，詳細(xì)信息為空。當(dāng)用戶點(diǎn)擊展開按鈕（'+'）時(shí)，onExpandRow 事件將被觸發(fā)。所以我們可以寫一些代碼來加載 ajax 詳細(xì)內(nèi)容。最后我們調(diào)用 'fixDetailRowHeight' 方法來固定當(dāng)詳細(xì)內(nèi)容加載時(shí)的行高度。

步驟 3：服務(wù)器端代碼

datagrid21_getdetail.php

&lt;?php
????include_once 'conn.php';

????$itemid = mysql_real_escape_string($_REQUEST['itemid']);

????$rs = mysql_query("select * from item where itemid='$itemid'");
????$item = mysql_fetch_array($rs);
?&gt;

<table class="dv-table" border="0" style="width:100%;">
????<tr>
????????<td rowspan="3" style="width:60px">
????????????&lt;?php
????????????????$aa = explode('-',$itemid);
????????????????$serno = $aa[1];
????????????????$img = "images/shirt$serno.gif";
????????????????echo "<img src="$img" style="width:60px;margin-right:20px" />";
?????????????&gt;
????????</td>
????????<td class="dv-label">Item ID: </td>
????????<td>&lt;?php echo $item['itemid'];?&gt;</td>
????????<td class="dv-label">Product ID:</td>
????????<td>&lt;?php echo $item['productid'];?&gt;</td>
????</tr>
????<tr>
????????<td class="dv-label">List Price: </td>
????????<td>&lt;?php echo $item['listprice'];?&gt;</td>
????????<td class="dv-label">Unit Cost:</td>
????????<td>&lt;?php echo $item['unitcost'];?&gt;</td>
????</tr>
????<tr>
????????<td class="dv-label">Attribute: </td>
????????<td colspan="3">&lt;?php echo $item['attr1'];?&gt;</td>
????</tr>
</table>

上一篇：jEasyUI 創(chuàng)建屬性網(wǎng)格下一篇：jEasyUI 創(chuàng)建子網(wǎng)格