数据表格中展开行显示详情
使用教程 » 数据表格中展开行显示详情
datagrid可以更改视图以显示不同的效果。
使用detail视图,datagrid可以在数据行左侧显示展开按钮(“+”或“-”)。
用户可以展开一行以显示其他详细信息。
步骤一: 创建数据表格
Item ID
Product ID
List Price
Unit Cost
Status
步骤二: 为DataGrid设置详细视图
要使用detail视图,请记住将视图脚本文件包含到页眉中.
$('#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如何呈现细节视图。
在本例中,我们返回一个简单的div元素,它将充当详细内容容器。
请注意,详细内容是空的。当用户单击expand按钮('+')时,将触发'onExpandRow'事件。
因此,我们可以编写一些代码来加载ajax细节内容。
最后,我们调用'fixDetailRowHeight'方法来固定加载细节内容时的行高度。
步骤三:服务器代码
datagrid21_getdetail.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);
?>
$aa = explode('-',$itemid);
$serno = $aa[1];
$img = "images/shirt$serno.gif";
echo "
";
?>
Item ID:
Product ID:
List Price:
Unit Cost:
Attribute:
下载 EasyUI 实例: