easyUI 展开DataGrid里面的行显示详细信息

@author YHC

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

查看 Demo

步骤 1: 创建 DataGrid

  
    
  
        
  
            
Item ID
  
            
Product ID
  
            
List Price
  
            
Unit Cost
  
            
Status
  
        
  
    
  
  

步骤 2: 为DataGrid设置详细视图

使用详细视图,切记:引入视图script文件在你的页面的头部.

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

'元素,它将充当最为一个详细内容的容器,

注意:详细信息为空,当用户点击展开按钮('+'),onExpandRow事件将被触发,所以我们可以写一些代码去加载ajax详细内容,最后我们调用fixDetailRowHeight方法去固定行高度,当详细内容加载之后.

步骤 3: 服务器端代码

datagrid21_getdetail.php

  
  
  
    
  
        
  
            ";  
            ?>  
        
  
        
Item ID: 
  
        
  
        
Product ID:
  
        
  
    
  
    
  
        
List Price: 
  
        
  
        
Unit Cost:
  
        
  
    
  
    
  
        
Attribute: 
  
        
  
    
  
  

下载 EasyUI 示例代码:

easyui-datagrid-demo.zip