easyUI下datagrid嵌套显示
主要是运用 easyui的方法进行行内嵌套显示,让一行可以显示更多的东西,让一行显示JSON的字符串、从表之类的东西。
下边先看效果图:
接下来说实现过程:
(1)在首次加载中添加代码
view: detailview,
detailFormatter:function(index,row){return '<div style="padding:2px"><table class="ddv"></table></div>';},onExpandRow: function(index,row){var ddv=$(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({url:'datagrid22_getdetail.php?itemid='+row.itemid,//从表的查询fitColumns:true,singleSelect:true,rownumbers:true,loadMsg:'',height:'auto',columns:[[{field:'orderid',title:'Order ID',width:100},{field:'quantity',title:'Quantity',width:100},
{field:'unitprice',title:'Unit Price',width:100}]],
onResize:function(){ $('#orderList').datagrid('fixDetailRowHeight', index);},//调节高度onLoadSuccess:function(){setTimeout(function(){ $('#orderList').datagrid('fixDetailRowHeight', index);},0);}}); $('#orderList').datagrid('fixDetailRowHeight', index);
}});
因为我是做了显示排序翻页的,所以放在了他们下边。如果没有,那么就放在你显示的字段下边就好了。
要显示的字段也写在上边就可以。
当用户点击展开按钮(’+’)时,将会触发“onExpandRow”事件。我们用树列创建一个新的子网格。当subgrid加载数据成功或调整大小时,请记住为master datagrid调用’fixDetailRowHeight’方法。
(2)如果前台报找不到detailview,那你需要在easyui中添加一个方法,我会放到我的资源下载中。由于要的可以下载。
(3)引用这个文件时记得放在这个引用下边
最后这个操作借鉴了一下引导,感谢作者。
http://www.jeasyui.com/tutorial/datagrid/datagrid22.php
转载于:https://www.cnblogs.com/Grant-Fu/p/7412973.html
easyUI下datagrid嵌套显示相关推荐
- easyui下datagrid列单独赋值
方法: onClickRow:function(rowIndex, rowData){var rows = $('#datagrid2').datagrid('getRows');rows[rowIn ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...
- easyui 隐藏input_easyui datagrid 列显示和隐藏
//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...
- element-ui tabs标签嵌套使用时 基础下划线不显示的问题
前几天写到 tabs标签 嵌套使用的时候,嵌套的tabs 下划线无法显示,记录下解决办法 在内层tabs 上添加v-if ="外层tabs的activeName",意思为当选中这个 ...
- EasyUI的datagrid分页,动态隐藏或显示列
EasyUI的datagrid分页,动态隐藏或显示列 业务需要,根据不用的查询条件,显示不同的列名 1 $("#chnMode").change(function(){ 2 if( ...
- easyui中datagrid表格如何正确显示和隐藏
最近遇到了一个问题,是关于easyui数据表格的显示和隐藏的,一般显示元素可以通过dispaly:block(或show())和display:none (hide())控制显示隐藏的 但是这个eas ...
- easyui+struts2:datagrid无法不能得到数据
转自:https://bbs.csdn.net/topics/390980437 easyui+struts2:datagrid无法访问到指定action: userlist.jsp部分代码: XML ...
- easyui 获取datagrid当前页码跟页面记录数
easyui 获取datagrid当前页码跟页面记录数 代码片easyui 获取datagrid当前页码跟页面记录数 https://blog.csdn.net/robinpipi/article/d ...
最新文章
- keras卷积层用法API
- 2014北京三险一金缴存比例
- Spring-AOP 通过配置文件实现 环绕增强
- 提高编程能力的7条建议
- GridView的一些常用属性:
- python 实现对地图的点击_python实现Pyecharts实现动态地图(Map、Geo)
- 中专计算机应用完整教学计划,中职生教学计划
- 嗅探辅助利器-幻影网盾原理
- 包括8个html的网页设计作品,8个超棒的HTML5网站设计欣赏
- PHP常用函数集合(可做桌面壁纸)
- oracle存储过程导出scv文件
- android移动应用技术教程课后答案,完整word版,《Android移动应用基础教程》_习题答案...
- 大数据平台以及一些核心组件介绍
- 让优秀成为一种习惯——笔录
- android硬件抽象层(HAL)详解
- 基于惯性和偏心的描述符矩(Moment of inertia and eccentricity based descriptors)
- Android开发通知栏的那些事
- iOS系统3DTouch全解析
- 直方图归一化因子计算公式
- java log 2 n_log2n