问题背景:
在做打印页面的时候,要求有详细的默认展开显示。 
 
遇到的问题:
1)在用扩展行的时候,grid的所有行都添加了展开收起的图标,(第二行没有明细)如下

 2)默认展示有详细行的时候,内容被滚动条遮挡(影响打印)

 
 3) 解决方法:在easyui扩展行的 onLoadSuccess 函数里进行处理 
 $list.datagrid({
view: detailview,
onLoadSuccess: function (data) { //没有详细的行 去掉 展示收起图标
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i].FeeCategoryID != 1) {
var expander = $('body').find('tr.datagrid-row[datagrid-row-index=' + i + ']');
expander.children('[field="_expander"]').html('');
}
} //默认展开所有详细行
var row = $list.datagrid("getRows");
for (var r = 0; r < row.length; r++) {
$list.datagrid("expandRow", r);
} //去除滚动条
var $ScrH1 = $('.datagrid-view1 .datagrid-body');
var $ScrH2 = $('.datagrid-view2 .datagrid-body');
$ScrH1.height($ScrH2[0].scrollHeight);
$ScrH2.height($ScrH2[0].scrollHeight);
$('.datagrid-view').height($('.datagrid-view2').height());
},
detailFormatter: function (index, row) {
if (row.FeeCategoryID == 1) {
return '<div class="datail-item-wrap" style="padding:5px 0"></div>';
}
},
onExpandRow: function (index, row) {
var feeID = row.FeeCategoryID;
var feeType = feeTypes.first(function (item) { return item.ID == feeID; });
if (feeID == 1) {
var wrap = $(this).datagrid('getRowDetail', index).find('div.datail-item-wrap');
var $cotent = '';
var feeDetail = row.ExpenseClaimFeeItems;
var detailData = JSON.parse(JSON.stringify(feeType.Feecategoryitem));
var dataLen = detailData.length;
for (var ind = 0; ind < dataLen; ind++) {
$cotent += '<li class="datail-item"><span>' + detailData[ind].FeeTypeCNName + ':</span><span>' + toDoubleThousands(feeDetail[ind].AmountWithTax) + '</span></li>';
}
$cotent = '<ul>' + $cotent + '</ul>';
} else {
return
}
wrap.panel({
border: false,
cache: false,
fit: true,
content: $cotent,
onLoad: function () {
$list.datagrid('fixDetailRowHeight', index);
}
});
$list.datagrid('fixDetailRowHeight', index);
}
});
    

easyui扩展行默认展开 以及 去除滚动条的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

  2. EasyUI扩展方法

    EasyUI扩展方法: 1.我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行.请问大家怎么配置才是指定行的啊? 配置 ...

  3. EasyUI扩展——自定义列排序匹配字段

    一些特殊情况下希望实现:单击某些列,但是排序要按照自定义指定另外的列排序 easyui扩展: 如果不写sort属性则按照默认该列的field排序 $.fn.datagrid.defaults.onBe ...

  4. 雷林鹏分享:jQuery EasyUI 扩展

    jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...

  5. Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】

    前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...

  6. EXT Grid 默认展开所有行

    grid.getStore().load({ //默认展开所有行. callback:function() { var expander = grid.plugins[0]; var count = ...

  7. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  8. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  9. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

随机推荐

  1. Golang开发环境搭建

    1.下载golang安装包: 下载地址:https://golang.google.cn/dl/ 2.安装Eclipse 下载goclipse 插件 3.配置 Go 的编译器 4.写代码. packa ...

  2. 前端获取指定cookie

    前端获取指定cookie的值 function getCookie(cookiename){ var name = cookiename + "="; var cs = docum ...

  3. Windows搭建Go语言环境·

    对于Windows用户,Go语言提供两种安装方式(源码安装除外): .MSI安装:程序会自动配置你的安装 .ZIP安装:需要你手动设置一些环境变量 一.MSI安装 1.下载安装包(根据操作系统选择相应 ...

  4. 3. Javascript学习笔记——变量、内存、作用域

    3. 变量.内存.作用域 3.1 基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值[Undefined.Null.Boolean.Number 和 Strin ...

  5. PHP 数字金额转换成中文大写金额的函数 数字转中文

    /** *数字金额转换成中文大写金额的函数 *String Int $num 要转换的小写数字或小写字符串 *return 大写字母 *小数位为两位 **/ function num_to_rmb($ ...

  6. vue-cli项目启动遇到的坑

    利用 npm init webpack projectname 之后 切换到项目所在文件夹下,执行命令 npm install ,一直非常慢,卡在那里基本不动. 最后是利用cnpm 安装成功的. 转载 ...

  7. 获取浏览器用户代理(user-agent)

    获取浏览器用户代理(user-agent) 用户代理(user-agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助网站识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数 ...

  8. 问题记录——com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    最近在搞一个Spring boot + Mybatis + Mysql的项目,用Mybatis访问数据库时,报了如下的错误,先在网上搜索了,试了各种办法都不行, 奇葩的是,连接另外1个数据库又没问题. ...

  9. 如何在Eclipse/Myeclipse/Scala IDEA for Eclipse 中正确删除已经下载过的插件(图文详解)

    不多说,直接上干货! 见 Eclipse/Myeclipse/Scala IDEA for Eclipse里两种添加插件的方法(在线和离线) 第一步 :在菜单栏中,找到help-------insta ...

  10. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...