easyui中datagrid的多层嵌套高度自适应

function contractInfoInit(shopSysNo){
    $(‘#dg‘).datagrid({//爷爷级列表
        url:"../shopController/searchSignInfoByShopSysNo.do?shopSysNo="+shopSysNo,
        fitColumns:true,
        singleSelect:true,
        autoRowHeight:true,
        columns: [[{
                    field : ‘shopNo‘, 
                    title : ‘商户号<br/>商户注册名称‘, 
                    width : 200, 
                    align : ‘left‘,
                    formatter:function(value,r){
                        var content = "<a href=‘javascript:showSignDetail("+r.signSysNo+")‘>"+
                        ifNull(r.bmShop.shopNo)+"</br>"+r.bmShop.shopRegName+"</a>"
                        return content;
                    }
                },{
                    field: ‘signStatus‘,
                    title: ‘合同状态‘,
                    width: 150,
                    formatter: function(value, r) {
                        return getSignStatus(r.signStatus);
                    }
                }
            ]],
        pagination: true,
        view: detailview,  
        detailFormatter:function(index,row){  
            return ‘<div style="padding:2px"><table class="ddv"></table></div>‘; 
        },  
        onExpandRow: function(index,row){//父亲级列表,注意此时行索引为index                                  
            var ddv = $(this).datagrid(‘getRowDetail‘,index).find(‘table.ddv‘);
            ddv.datagrid({
                url:"../shopController/searchBranchInfoBySignSysNo.do?signSysNo="+row.signSysNo,
                fitColumns:true,
                singleSelect:true,
                loadMsg:‘‘,
                //height:‘auto‘,
                autoRowHeight:true,
                columns:[[{
                            field:‘branchName‘,
                            title:‘网点中文名称‘,
                            width:100,
                            formatter: function(value, r){
                                return ifNull(r.branchName);
                            }
                        },,{
                            field:‘terminalNum‘,
                            title:‘终端台数‘,
                            width:100,
                            formatter: function(value ,r){
                                return ifNull(r.terminalNum);
                            }
                        }
                ]],
                view: detailview,  
                detailFormatter:function(index,r){  
                    return ‘<div style="padding:2px"><table class="dddv"></table></div>‘;  
                },  
                onExpandRow: function(index1,r){//子列表,此时行索引为index1
                    var dddv = $(this).datagrid(‘getRowDetail‘,index1).find(‘table.dddv‘);
                    dddv.datagrid({
                        url:"../shopController/searchTerminalInfoByBranchSysNo.do?branchSysNo="+r.branchSysNo,
                        fitColumns:true,
                        nowrap:false,
                        singleSelect:true,
                        loadMsg:‘‘,
                        height:‘auto‘,
                        autoRowHeight:true,
                        columns:[[{
                                field:‘terminalNo‘,
                                title:‘终端号‘,
                                align:‘left‘,
                                width:100,
                                formatter: function(value, r){                                  
                                    return ifNull(r.terminalNo);
                                }
                            },{
                                field:‘printShopName‘,
                                title:‘打印商户名称‘,
                                align:‘left‘,
                                width:100,
                                formatter: function(value,r){
                                    return ifNull(r.printShopName);
                                }
                            }
                             
                        ]], 
                        onResize:function(){                        
                                ddv.datagrid(‘fixDetailRowHeight‘,index1);
                                $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);
                         },
                        onLoadSuccess:function(){
                            setTimeout(function(){                                  
                                ddv.datagrid(‘fixDetailRowHeight‘,index1);//在加载成功时,获取父列表的明细高度,使其适应明显点开后的高度,注意此时的行索引为index1
                                ddv.datagrid(‘fixRowHeight‘,index1);//在加载成功时,获取子明细点开后父列表的列高,防止在超过加载成功前的高度时,出现垂直方向的滑动条
                                $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);//在加载成功时,获取爷爷列表的明细高度,使其适应前面父列表和子列表的高度变化,注意此时的行索引为index
                                $(‘#dg‘).datagrid(‘fixRowHeight‘,index);//在加载成功时,获取父列表的明细点开后爷爷列表的高度,防止在超过加载成功前的高度时,出现垂直方向的滑动条
                            },0);
                        }
                    });
                    ddv.datagrid(‘fixDetailRowHeight‘,index1);
                    ddv.datagrid(‘fixRowHeight‘,index1);
                    $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);
                    $(‘#dg‘).datagrid(‘fixRowHeight‘,index);
                }, 
                onResize:function(){                    
                        $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);                                      
                },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);//在加载爷爷列表明细(即:父列表)成功时,获取此时整个列表的高度,使其适应变化后的高度,此时的索引
                        $(‘#dg‘).datagrid(‘fixRowHeight‘,index);//防止出现滑动条
                    },0);
                }
            });
            $(‘#dg‘).datagrid(‘fixDetailRowHeight‘,index);
        }
         
    });             
}
 
/**
 * 显示合同详情
 * @param {} signSysNo
 */
function showSignDetail(signSysNo) {
    addTab(‘合同详情‘, ‘../contractController/searchContractDetail.do?signSysNo=‘ + signSysNo);
}
时间: 2024-11-10 07:26:00

easyui中datagrid的多层嵌套高度自适应的相关文章

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个      模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

easyUI中datagrid的使用

easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,html中主要是确定datagrid在网页中的位置,css来设置datagrid的样式,js填充datagrid数据. 一 html部分 示例代码如下: <div class="columntablebox" > <table id="columnTable&qu

如何在NPOI中实现宽度自适应和高度自适应

转自: blog.csdn.net/echoshinian100/article/details/38540321 由于系统需要在网页上导 出Excel文件,最近花了一段时间去学习NPOI插件.通过NPOI插件在服务端来生成Excel文件流并下载到本地.NPOI实际上和Excel一毛 钱关系都没有,它只是完全破译了Excel文件的存储格式,并用C#来生成同样的格式从而被识别为Excel文件. NPOI和Excel VBA相比优点很多,首先是Excel VBA中的对象太多,而且是基于Visual

EasyUI中DataGrid构建复合表头

在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: columns: [[ { field: '_id', title: '行号', fixed: true, rowspan:2 }, { field: '_j', title: '铁路局', fixed: true, colspan:2 } ], [ { field: '_id', title: '京局