easyUI 展開DataGrid里面的行顯示詳細信息

http://blog.csdn.net/yanghongchang_/article/details/7854156原著

datagrid 可以改變它的view(視圖)去顯示不同的效果.使用詳細視圖,datagrid可以顯示展開按鈕("+" 或者 "-")在數據行的左邊,用戶可以展開一個行去顯示一個附加的詳細信息.

查看 Demo

 

步驟 1: 創建 DataGrid

<table id="dg" style="width:500px;height:250px" url="data/datagrid_data.json" 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: 為DataGrid設置詳細視圖

使用詳細視圖,切記:引入視圖script文件在你的頁面的頭部.

 

 

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

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

我們定義detailFormatter函數告訴datagrid 如何渲染詳細視圖,在這種情況下,我們返回一個簡單的 '<div>'元素,它將充當最為一個詳細內容的容器,

 

注意:詳細信息為空,當用戶點擊展開按鈕('+'),onExpandRow事件將被觸發,所以我們可以寫一些代碼去加載ajax詳細內容,最后我們調用fixDetailRowHeight方法去固定行高度,當詳細內容加載之后.

 

步驟 3: 服務器端代碼

 

datagrid21_getdetail.php

 

<?php
$itemid = $_REQUEST['itemid'];

$content = file_get_contents('data/datagrid_data.json');
$data = json_decode($content,true);
foreach($data['rows'] as $item){
    if ($item['itemid'] == $itemid){
        break;
    }
}

?>

<table class="dv-table" border="0" style="width:100%;">
    <tr>
        <td rowspan="3" style="width:60px">
            <?php
                echo "<img src=\"images/$itemid.gif\" style=\"height:50px\"/>";
            ?>
        </td>
        <td class="dv-label">Item ID: </td>
        <td><?php echo $item['itemid'];?></td>
        <td class="dv-label">Product ID:</td>
        <td><?php echo $item['productid'];?></td>
    </tr>
    <tr>
        <td class="dv-label">List Price: </td>
        <td><?php echo $item['listprice'];?></td>
        <td class="dv-label">Unit Cost:</td>
        <td><?php echo $item['unitcost'];?></td>
    </tr>
    <tr>
        <td class="dv-label">Attribute: </td>
        <td colspan="3"><?php echo $item['attr1'];?></td>
    </tr>
</table>