easyui中的DataGrid可以切换不同的视图,当使用detailview时,可以让用户展开行以显示该行的详细信息。行的明细信息可以通过AJAX的方式进行加载。
使用detailview时,首先建立表格基本框架:
<table id="dg" style="width:500px;height:250px" url="data/datagrid_data.json" 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" align="center" width="50">Status</th>
</tr>
</thead>
</table>
表格的定义可以在table标签中进行,所以不用再编写JS代码。
接着,应用detailview并定义如何展开加载明细内容:
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';
},
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);
}
});
在展开行时再动态通过AJAX的方式加载行的明细信息,明细信息的内容及布局可以是任意的,如下所示:
<table class="dv-table" border="0" style="width:100%;">
<tr>
<td rowspan="3" style="width:60px">
<?php
echo "<img src=\"images/$itemid.gif\" style=\"height:50px\"/>";
?>
</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>
</table>
更详细的使用及演示可以参考:http://www.jeasyui.com/tutorial/datagrid/datagrid21.php
分享到:
相关推荐
JS EasyUI DataGrid动态加载数据
easyui的datagrid的数据渲染
easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501
修改上一个资源版本中结束编辑时...1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题
easyui的datagrid生成合并行,合计计算价格!
easyui 可编辑datagrid完整例子,支持filebox 项目中的数据库使用的是mysql,内置sql脚本,执行脚本即可创建数据
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
EasyUI版本比较旧,请下载新的版本更新,最新版本测试通过。
解决EasyUIdataGrid列比较多,无数据,列展现不全
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
研究了好久,终于成功在jquery easyui中的datagrid中添加searchbox!
用于博客easyui下datagrid嵌套显示的相关easyui代码文件
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyUI datagrid 行上移,下移,置顶,置底的方法
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响(比如number datetime)扩展一次编辑多列,不受编辑类型影响,没有编辑属性也可以。
EasyUI DataGrid过滤用法实例