easyui datagrid-detailview 嵌套高度自适应
实现效果
原因
异步加载,明细展开时,可能会遇到父列表不能自动适应子列表高度的变化
具体代码
$('#centerdatagrid').datagrid({
    	url:'${ctx}/offer/offer!projectPage.htm',
        title: '项目列表',
        iconCls:'iconfont icon-iconlist',
        toolbar: '#toolbar',
        border: false,
        fit: true,
        singleSelect: true,
        striped : true,
        toolbar: '#toolbar',
        pagination: true,
        pageSize: 20,
        rownumbers: true,
        fitColumns: false,
        autoRowHeight:true,
        columns: [
		[
		 	{field: 'name', title: '项目名称'},
		 	{field: 'projectTreeName', title: '项目分类'},
		 	{field: 'customer', title: '客户'},
		 	{field: 'salesperson', title: '销售员'},
		 	{field: 'bidder', title: '报价人'},
		 	{field: 'offerTime', title: '时间'},
		 	{field: 'description', title: '备注'},
		 	{field: 'operate', title: '操作',
		 		formatter: function(value,row,index){
		 			var html = '<a onclick="toList('+row.projectId+')" href="javascript:void(0);">【添加子项目】</a>';
		 			html = html + '<a onclick="toList('+row.projectId+')" href="javascript:void(0);">【查看报价清单】</a>';
		 			return html;
				}
		 	}
		]
        ],
        onBeforeLoad:function(){},
        onLoadSuccess:function(){},
        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:'${ctx}/offer/offer!projectPage.htm',
            	fitColumns:true,
                singleSelect:true,
                loadMsg:'',
                //height:'auto',
                autoRowHeight:true,
                pagination: true,
                pageSize: 20,
                columns: [
        		[
        		 	{field: 'name', title: '项目名称'},
        		 	{field: 'projectTreeName', title: '项目分类'},
        		 	{field: 'customer', title: '客户'},
        		 	{field: 'salesperson', title: '销售员'},
        		 	{field: 'bidder', title: '报价人'},
        		 	{field: 'offerTime', title: '时间'},
        		 	{field: 'description', title: '备注'}
        		]
                ],
                onResize:function(){
                    $('#centerdatagrid').datagrid('fixDetailRowHeight',index);
	            },
	            onLoadSuccess:function(){
	                setTimeout(function(){
	                    $('#centerdatagrid').datagrid('fixDetailRowHeight',index);//在加载爷爷列表明细(即:父列表)成功时,获取此时整个列表的高度,使其适应变化后的高度,此时的索引
	                    $('#centerdatagrid').datagrid('fixRowHeight',index);//防止出现滑动条
	                },0);
	            }
            });
            $('#centerdatagrid').datagrid('fixDetailRowHeight',index);
        }
    });												
											easyui datagrid-detailview 嵌套高度自适应的更多相关文章
- easyui datagrid detailview嵌套datagrid的问题
		解决问题办法来自 http://www.coding123.net/article/20141113/easyui-datagrid-datailview-use-sub-datagrid-not-a ... 
- WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应
		WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应 参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ... 
- easyui datagrid标题列宽度自适应
		最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ... 
- easyui设置界面的高度自适应
		单独设置界面中特定region区时,高度自适应失败:设置整个界面时成功.实现代码在script块中,具体代码如下: <%@ Page Language="C#" AutoEv ... 
- easyui datagrid 三层嵌套
		代码: function local(role,region,ip){ $("#roleList").datagrid({ // title:'服务器监控列表', height:( ... 
- jquery easyui datagrid detailview groupview添加自定义视图view
		var myview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { $.fn.dat ... 
- jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined
		1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ... 
- EasyUI combobox 下拉高度自适应
		要指出的是,combobox是继承自combo的,所以,combo的属性也可以被combobox使用,该问题也是这样产生的,知道这个原理,该问题就解决一半了,另一点要指出的是,在easyui中,num ... 
- 如何使easyui的datagrid 高度自适应
		如何使easyui的datagrid 高度自适应? 最开始使用easyui的datagrid加载数据时,对其设置的高度都是固定值,数据较多时table表现为滚动条形式.某天,老大突然需要datagri ... 
随机推荐
- VBox虚拟机安装debian
			决定在win7上装一个Linux虚拟机用作Linux开发学习,虽然win7下已经有了Cygwin,还是想在一个比较完整的环境下.前面装过Ubuntu发现界面太笨重了,考虑重新换一个,同时比较喜欢apt ... 
- 读取Java文件到byte数组的三种方式
			package zs; import java.io.BufferedInputStream; import java.io.ByteArrayOutputStream; import java.io ... 
- Struts1 MVC框架的工作原理
			MVC英文及Model-View-Controller,分别是模型(Model),视图(View)和控制(Controller).MVC模式的目的是实现web系统的职能分工. View:即用户交互界面 ... 
- Farseer.net轻量级开源框架说明及链接索引
			Farseer.net是什么? 基于.net framework 4 开发的一系列解决方案. 完全开源在GitHub中托管.并发布到NuGet中. Farseer.Net由最初的关系数据库ORM框架后 ... 
- Servlet相关的几种中文乱码问题
			Servlet相关的几种中文乱码问题浏览器调用jsp,html等页面中文显示乱码使得文件本身以utf-8字符集编辑保存 让浏览器浏览器以utf-8字符集解析 在浏览器中右键选择编码格式为utf-8: ... 
- 通过 GCC 学习 OpenMP 框架
			OpenMP 框架是使用 C.C++ 和 Fortran 进行并发编程的一种强大方法.GNU Compiler Collection (GCC) V4.4.7 支持 OpenMP 3.0 标准,而 ... 
- 背景渐变 background-image:linear-gradient(0deg,#fff,#ccc);
			背景渐变 background-image:linear-gradient(0deg,#fff,#ccc); 
- h5编写帧动画
			var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; var ... 
- 将Jar安装到本地仓库和Jar上传到私服
			举例 1. 依赖如下: <dependency> <groupId>org.quartz-scheduler.internal</groupId> <arti ... 
- Linux部署Web项目小记
			1.安装Tomcat 官网下载 解压缩:tar -zxvf apache-tomcat-8.0.32.tar.gz 配置server.xml 连接池: <Executor name=" ... 
