数据网格(datagrid)可以改变它的视图(view)来显示不同的效果。使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-")。用户可以展开行来显示附加的详细信息。

步骤 1:创建数据网格(DataGrid)

    
        
            
                
                
                
                
                
            
        
    
Item IDProduct IDList PriceUnit CostStatus

步骤 2:为数据网格(DataGrid)设置详细视图

为了使用详细视图,请记得在页面头部引用视图脚本文件。


$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return '
';     },     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' 函数,告诉数据网格(datagrid)如何渲染详细视图。 在这种情况下,我们返回一个简单的 '

' 元素,它将充当详细内容的容器。 请注意,详细信息为空。当用户点击展开按钮('+')时,onExpandRow 事件将被触发。 所以我们可以写一些代码来加载 ajax 详细内容。 最后我们调用 'fixDetailRowHeight' 方法来固定当详细内容加载时的行高度。

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


    
        
        
        
        
        
    
    
        
        
        
        
    
    
        
        
    
            <?php                 $aa = explode('-',$itemid);                 $serno = $aa[1];                 $img = "images/shirt$serno.gif";                 echo "";             ?>         Item ID: <?php echo $item['itemid'];?>Product ID:<?php echo $item['productid'];?>
List Price: <?php echo $item['listprice'];?>Unit Cost:<?php echo $item['unitcost'];?>
Attribute: <?php echo $item['attr1'];?>

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid21.zip