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 ...
随机推荐
- oracle 安装,启动 ,plsql 连接
1.下载oracle 服务器端,正常安装,在选择桌面类或者是服务器类的时候选择服务器类. 2.下载oracle 客户端解压版 下载地址 链接:https://pan.baidu.com/s/1mi ...
- idea下关联spark源码环境(转)
0.环境: java 1.8 scala 2.11.8 maven 3.5.0 idea 2017 spark 2.2.0 1完成以下配置 java环境变量 scala环境变量 maven setti ...
- frame方式布局一段文子,设置宽高
计算一段文字的宽高 /** * 计算一段文字的宽高 * * @param size 这段文字的最大宽高 * @param options NSStringDrawingUsesLineFragment ...
- 【原创】webbluetoorh 在windows下无法显示搜索列表,在mac下正常的解决办法
google webbluetooth在windows下不能弹出设备搜索列表提示“Web Bluetooth API is not available”,因为webbluetooth是google新推 ...
- php+nginx 限制上传文件大小
问题:在后台上传8M大小的图片,上传不成功 nginx返回413,如下图所示: 分析:nginx配置文件或者php中,可上传的大小设置太小了 解决办法------检查nginx和php的配置文件里面的 ...
- CAD参数绘制填充(网页版)
填充是CAD图纸中不可或缺的对象,在机械设计行业,常常需要将零部件剖开,以表现其内部的细节,而这些被剖开的截面会用填充来表示:在工程设计行业,一些特殊的材料或地形,也会用填充来表示. js中实现代码说 ...
- 解决webstorm中vue语法没有提示
首先看看webstrom内置的vue插件,打上勾,没有这个选项就要自己去下载插件了 如果插件还是没有语法提示,可以用下面的方法,自己添加语法进去搜索 unknown HTML tag attribut ...
- B1. Concurrent 多线程的创建
[概述] 多线程的创建常用的有两种方法:1). 继承 Thread 类: 2). 实现 Runnable 接口: 3). 实现 Callable 接口. [继承 Thread 类] /** * 1. ...
- jenkins构建项目记录2(tag)
与jenkins构建项目记录1不同的是通过tag拉去对应版本代码 1.先安装创建(git parameter) 2.general设置 name可任意命名,下面源码管理设置时变量会引用到. 3.源码管 ...
- CentOS 7.4 源码编译安装 Redis
一.CentOS 7.4 源码编译安装 Redis 1.下载源码并解压 wget http://download.redis.io/releases/redis-4.0.10.tar.gz tar ...