jQuery EasyUI使用教程之在數據網格中擴展行顯示詳細信息

數據網格能夠更改它的視圖來顯示不一樣的效果。使用詳細視圖，數據網格能夠在數據行的左邊顯示展開按鈕（「+」或「-」）。用戶能夠展開行來顯示附加的詳細信息。

jQuery EasyUI最新試用版下載請猛戳>>

查看jQuery EasyUI演示

Step 1：建立數據網格

< 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：爲數據網格設置詳細視圖

想要使用詳細視圖，請記住在頁面頭部引用視圖腳本文件。

<script type="text/javascript" src="http://www.jeasyui.com/easyui/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' 函數，告訴數據網格如何渲染詳細視圖。 在這種狀況下,咱們返回一個簡單的 'div' 元素，它將充當詳細內容的容器。 請注意，詳細信息爲空。當用戶點擊展開按鈕（'+'）時，onExpandRow事件將被觸發。 因此咱們能夠寫一些代碼來加載ajax詳細內容。最後咱們調用'fixDetailRowHeight'方法來固定當詳細內容加載時的行高度。

Step 3：服務器代碼

datagrid21_getdetail.php

<!--?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%;" >

<tbody><tr>

<td rowspan= "3" style= "width:60px" >

<!--?php

$aa =  explode ( '-' , $itemid );

$serno =  $aa [1];

$img =  "images/shirt$serno.gif" ;

echo "<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>

</tbody></table>

下載EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程>>