jQuery EasyUI使用教程之建立具備主數據網格的子網格

使用數據網格的詳細視圖，用戶能夠展開一行來顯示附加的詳細信息。任何內容均可以加載做爲行詳細，子網格也能夠動態加載。本教程將向您展現如何在主網格上建立一個子網格。

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

查看jQuery EasyUI演示

Step 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 >

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 style="padding:2px"><table class="ddv"></table></div>' ;

},

onExpandRow:  function (index,row){

var ddv = $( this ).datagrid( 'getRowDetail' ,index).find( 'table.ddv' );

ddv.datagrid({

url: 'datagrid22_getdetail.php?itemid=' +row.itemid,

fitColumns: true ,

singleSelect: true ,

rownumbers: true ,

loadMsg: '' ,

height: 'auto' ,

columns:[[

{field: 'orderid' ,title: 'Order ID' ,width:100},

{field: 'quantity' ,title: 'Quantity' ,width:100},

{field: 'unitprice' ,title: 'Unit Price' ,width:100}

]],

onResize: function (){

$( '#dg' ).datagrid( 'fixDetailRowHeight' ,index);

},

onLoadSuccess: function (){

setTimeout( function (){

$( '#dg' ).datagrid( 'fixDetailRowHeight' ,index);

},0);

}

});

$( '#dg' ).datagrid( 'fixDetailRowHeight' ,index);

}

});

當用戶點擊展開按鈕（'+'）時，'onExpandRow' 事件將被觸發。 咱們建立一個新的帶有三列的子網格。 當子網格數據加載成功時或者改變尺寸大小時，請記得對主網格調用 'fixDetailRowHeight' 方法。

Step 3：服務器端代碼

datagrid22_getdata.php

$result =  array ();

 

include 'conn.php' ;

 

$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 'conn.php' ;

 

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

 

$rs = mysql_query( "select * from lineitem where itemid='$itemid'" );

$items =  array ();

while ( $row = mysql_fetch_object( $rs )){

array_push ( $items ,  $row );

}

echo json_encode( $items );

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


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