easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著
datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图,datagrid可以显示展开按钮("+" 或者 "-")在数据行的左边,用户可以展开一个行去显示一个附加的详细信息.
步骤 1: 创建 DataGrid
- <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" width="50" align="center">Status</th>
- </tr>
- </thead>
- </table>
步骤 2: 为DataGrid设置详细视图
使用详细视图,切记:引入视图script文件在你的页面的头部.
- <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
- $('#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);
- }
- });
我们定义detailFormatter函数告诉datagrid 如何渲染详细视图,在这种情况下,我们返回一个简单的 '<div>'元素,它将充当最为一个详细内容的容器,
注意:详细信息为空,当用户点击展开按钮('+'),onExpandRow事件将被触发,所以我们可以写一些代码去加载ajax详细内容,最后我们调用fixDetailRowHeight方法去固定行高度,当详细内容加载之后.
步骤 3: 服务器端代码
datagrid21_getdetail.php
- <?php
- $itemid = $_REQUEST['itemid'];
- $content = file_get_contents('data/datagrid_data.json');
- $data = json_decode($content,true);
- foreach($data['rows'] as $item){
- if ($item['itemid'] == $itemid){
- break;
- }
- }
- ?>
- <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>
easyUI 展开DataGrid里面的行显示详细信息的更多相关文章
- win10 显示详细信息窗格
win10 显示详细信息窗格 CreateTime--2018年5月26日09点13分 Author:Marydon 1.说明: win10无法像win7那样将详细信息窗格显示在窗口的底部,只能显 ...
- easyui的datagrid改变整行颜色
easyui的datagrid改变单元格颜色方法1:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变单元格颜色方法2 ...
- Easyui的datagrid的editor(行编辑器)如何扩展datetimebox类型
在easyui的datagrid扩展方法中添加这样的时间日期(datetimebox)代码块 放在 $.extend($.fn.datagrid.defaults.editors,{datetim ...
- 单击HighCharts柱形体弹框显示详细信息
上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析.在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详 ...
- html5,单击显示详细信息
<details open=""> <summary>点击率</summary> <p>详细信息</p&g ...
- datagrid 列鼠标悬浮显示全部信息
首次发表随笔,且是java新手,求不黑,可能在高手眼里好笑,嘿嘿1,样式设置超过字数限制显示省略号:<style type="text/css"> .datagrid- ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- EasyUI的datagrid有值但是显示不出来
$("#goodsList").datagrid({ url: "../Ajax/GoodsAjax.ashx", queryParams: { cmd ...
- easyui 中datagrid 点击行的事件
$('#datagrid 的ID').datagrid({ onClickRow:function(index,data) { ...
随机推荐
- python中lxml的应用
首先下载lxml, http://www.lfd.uci.edu/~gohlke/pythonlibs/ ,然后添加引用 from lxml import _elementpath as DONTUS ...
- WPF中ItemsControl绑定到Google ProtocolBuffer的结构体时的性能问题
背景: 最近遇到一个DataGrid的性能问题:里面大概有4000个数据, 绑定的ItemSource的类也只有一层数据,即简单的List(里面每个是Protocol Buffer自动产生的一个类,1 ...
- java继承捡漏
总结:老师真是的.讲课的时候,觉得打的比喻特别有趣,结果啊不晓得他是良苦用心.知识就是包含在里面 继承:子类继承父类,子类就可以把父类的东西拿来用 这体现在程序运行时,你会发现,子类对象可以调用父类的 ...
- HTTP-Runoob:HTPP Content-Type
ylbtech-HTTP-Runoob:HTPP Content-Type 1.返回顶部 1. HTTP content-type Content-Type,内容类型,一般是指网页中存在的Conten ...
- 2016.4.6 WinForm显示PDF两种方法
1.最直接的方法,添加webbrowser控件 webb.Url = new Uri(path);可显示pdf控件. 如果需要在打开时跳转到某页,可用在路径后直接加#page=,例如webb.Url ...
- 问题:oracle long 与 clob;结果:long类型比clob到底差在什么地方?
long类型比clob到底差在什经常看到9i以上的文档,说以后 clob会逐步取代long,一直想不出, 而我在8.1.7上也测试2个字段好像 在存储上也看不出什么区别?么地方? 差别还是很大的, 比 ...
- AFNetworking-2.5-源码阅读剖析--网络请求篇
一.前言 AFNetworking,非常友好简单的网络请求第三方框架,在GitHub中已经获得了25000++的star,链接地址:https://github.com/AFNetworking/AF ...
- java判断一个字符串中是否包含全角
public static boolean isAngle(String str){ if(str.getBytes().length==str.length()){ //全是半角 return tr ...
- Emulator 模拟器起不来
内存过大 打开SDK Manager.Avd Manager 新建 adb 命令不识别,因为环境变量里没有加入platform-tools文件夹 下载并按照下面这个更新,会帮助还原VS2012,我这 ...
- Solr各组件之间的关系图
原文地址:http://blog.csdn.net/clj198606061111/article/details/20854419