jQuery EasyUI DataGrid - Expand Row to Show Details

The DataGrid can change its view to display different effects. By using the detail view, the DataGrid can show expand buttons ("+" or "-") on the left side of data rows. Users can expand the row to display additional detailed information.

Step 1: Create the 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>

Step 2: Set Detail View for the DataGrid

To use the detail view, remember to include the view script file in the header of your page.

<script type="text/javascript" src="http://www.w3cschool.cc/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);
    }
});

We define the 'detailFormatter' function to tell the DataGrid how to render the detail view. In this case, we return a simple '<div>' element, which will act as a container for the detailed content. Note that the detailed information is empty. When the user clicks the expand button ("+"), the onExpandRow event is triggered. So we can write some code to load the AJAX detailed content. Finally, we call the 'fixDetailRowHeight' method to fix the row height when the detailed content is loaded.

Step 3: Server-Side Code

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

<table class="dv-table" border="0" style="width:100%;">
    <tr>
        <td rowspan="3" style="width:60px">
            <?php
                $aa = explode('-',$itemid);
                $serno = $aa[1];
                $img = "images/shirt$serno.gif";
                echo "&lt;img src=\"$img\" style=\"width:60px;margin-right:20px\" />";
            ?>
        </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>

Download jQuery EasyUI Example

jeasyui-datagrid-datagrid21.zip