easyui扩展行默认展开 以及 去除滚动条

问题背景:

在做打印页面的时候,要求有详细的默认展开显示。

遇到的问题:

1)在用扩展行的时候,grid的所有行都添加了展开收起的图标,(第二行没有明细)如下

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

3) 解决方法:在easyui扩展行的 onLoadSuccess 函数里进行处理

  1 $list.datagrid({
  2     view: detailview,
  3     onLoadSuccess: function (data) {
  4
  5         //没有详细的行 去掉 展示收起图标
  6         for (var i = 0; i < data.rows.length; i++) {
  7             if (data.rows[i].FeeCategoryID != 1) {
  8                 var expander = $(‘body‘).find(‘tr.datagrid-row[datagrid-row-index=‘ + i + ‘]‘);
  9                 expander.children(‘[field="_expander"]‘).html(‘‘);
 10             }
 11         }
 12
 13         //默认展开所有详细行
 14         var row = $list.datagrid("getRows");
 15         for (var r = 0; r < row.length; r++) {
 16             $list.datagrid("expandRow", r);
 17         }
 18
 19         //去除滚动条
 20         var $ScrH1 = $(‘.datagrid-view1 .datagrid-body‘);
 21         var $ScrH2 = $(‘.datagrid-view2 .datagrid-body‘);
 22         $ScrH1.height($ScrH2[0].scrollHeight);
 23         $ScrH2.height($ScrH2[0].scrollHeight);
 24         $(‘.datagrid-view‘).height($(‘.datagrid-view2‘).height());
 25     },
 26     detailFormatter: function (index, row) {
 27         if (row.FeeCategoryID == 1) {
 28             return ‘<div class="datail-item-wrap" style="padding:5px 0"></div>‘;
 29         }
 30     },
 31     onExpandRow: function (index, row) {
 32         var feeID = row.FeeCategoryID;
 33         var feeType = feeTypes.first(function (item) { return item.ID == feeID; });
 34         if (feeID == 1) {
 35             var wrap = $(this).datagrid(‘getRowDetail‘, index).find(‘div.datail-item-wrap‘);
 36             var $cotent = ‘‘;
 37             var feeDetail = row.ExpenseClaimFeeItems;
 38             var detailData = JSON.parse(JSON.stringify(feeType.Feecategoryitem));
 39             var dataLen = detailData.length;
 40             for (var ind = 0; ind < dataLen; ind++) {
 41                 $cotent += ‘<li class="datail-item"><span>‘ + detailData[ind].FeeTypeCNName + ‘:</span><span>‘ + toDoubleThousands(feeDetail[ind].AmountWithTax) + ‘</span></li>‘;
 42             }
 43             $cotent = ‘<ul>‘ + $cotent + ‘</ul>‘;
 44         } else {
 45             return
 46         }
 47         wrap.panel({
 48             border: false,
 49             cache: false,
 50             fit: true,
 51             content: $cotent,
 52             onLoad: function () {
 53                 $list.datagrid(‘fixDetailRowHeight‘, index);
 54             }
 55         });
 56         $list.datagrid(‘fixDetailRowHeight‘, index);
 57     }
 58 });$list.datagrid({
 59     view: detailview,
 60     onLoadSuccess: function (data) {
 61
 62         //没有详细的行 去掉 展示收起图标
 63         for (var i = 0; i < data.rows.length; i++) {
 64             if (data.rows[i].FeeCategoryID != 1) {
 65                 var expander = $(‘body‘).find(‘tr.datagrid-row[datagrid-row-index=‘ + i + ‘]‘);
 66                 expander.children(‘[field="_expander"]‘).html(‘‘);
 67             }
 68         }
 69
 70         //默认展开所有详细行
 71         var row = $list.datagrid("getRows");
 72         for (var r = 0; r < row.length; r++) {
 73             $list.datagrid("expandRow", r);
 74         }
 75
 76         //去除滚动条
 77         var $ScrH1 = $(‘.datagrid-view1 .datagrid-body‘);
 78         var $ScrH2 = $(‘.datagrid-view2 .datagrid-body‘);
 79         $ScrH1.height($ScrH2[0].scrollHeight);
 80         $ScrH2.height($ScrH2[0].scrollHeight);
 81         $(‘.datagrid-view‘).height($(‘.datagrid-view2‘).height());
 82     },
 83     detailFormatter: function (index, row) {
 84         if (row.FeeCategoryID == 1) {
 85             return ‘<div class="datail-item-wrap" style="padding:5px 0"></div>‘;
 86         }
 87     },
 88     onExpandRow: function (index, row) {
 89         var feeID = row.FeeCategoryID;
 90         var feeType = feeTypes.first(function (item) { return item.ID == feeID; });
 91         if (feeID == 1) {
 92             var wrap = $(this).datagrid(‘getRowDetail‘, index).find(‘div.datail-item-wrap‘);
 93             var $cotent = ‘‘;
 94             var feeDetail = row.ExpenseClaimFeeItems;
 95             var detailData = JSON.parse(JSON.stringify(feeType.Feecategoryitem));
 96             var dataLen = detailData.length;
 97             for (var ind = 0; ind < dataLen; ind++) {
 98                 $cotent += ‘<li class="datail-item"><span>‘ + detailData[ind].FeeTypeCNName + ‘:</span><span>‘ + toDoubleThousands(feeDetail[ind].AmountWithTax) + ‘</span></li>‘;
 99             }
100             $cotent = ‘<ul>‘ + $cotent + ‘</ul>‘;
101         } else {
102             return
103         }
104         wrap.panel({
105             border: false,
106             cache: false,
107             fit: true,
108             content: $cotent,
109             onLoad: function () {
110                 $list.datagrid(‘fixDetailRowHeight‘, index);
111             }
112         });
113         $list.datagrid(‘fixDetailRowHeight‘, index);
114     }
115 });

    

原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/9648130.html

时间: 2024-08-26 06:40:04

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

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

一些特殊情况下希望实现:单击某些列,但是排序要按照自定义指定另外的列排序 easyui扩展: 如果不写sort属性则按照默认该列的field排序 $.fn.datagrid.defaults.onBeforeLoad = function (e) { var opts = $(this).datagrid("options"); var colopts = $(this).datagrid("getColumnOption", opts.sortName); var

EasyUI扩展方法

EasyUI扩展方法: 1.我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行.请问大家怎么配置才是指定行的啊? 配置Textarea不可拖动变大变小:   只能自己扩展 textarea 才能实现,配置不用修改,直接扩展就行 Js代码   jQuery.extend(jQuery.fn.datagrid.defaults.editors, { combotree: { init: function(contain

EasyUI扩展方法 + jutil.js

?          EasyUI扩展方法 + jutil.js             博客分类: jQueryEasyUi EasyUI扩展方法: 1.我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行.请问大家怎么配置才是指定行的啊? 配置Textarea不可拖动变大变小:   只能自己扩展 textarea 才能实现,配置不用修改,直接扩展就行 Js代码   jQuery.extend(jQuery.fn.

雷林鹏分享:jQuery EasyUI 扩展

jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editable Tree) 数据网格行过滤(DataGrid Filter Row) 数据网格行拖放(Drag and Drop Rows in DataGrid) 树形网格行拖放(Drag and Drop Rows in TreeGrid) 主题(Themes) DWR 加载器(DWR Loader) R

easyui datagrid行合并

easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable =

js控制treeview默认展开

bootStrapTreeview 在bootstrap的treeview官网,可以找到这个方法,用js控制可以写成:$('#xxx').treeview('collapseNode',{silent:true, ignoreChildren: false}); 这样就默认展开所有子节点了.

去除滚动条,内容仍然可以滚动

html代码如下: 其中,有个id为bottom的父级div,其下一级是类名为news的子div 样式代码: 其中父级div的width为900px,子div的宽度为950px,就是说在水平方向,子div是有溢出的. 当我们给子div添加一个overflow-x:hidden的属性及属性值后,便将子div的溢出部分隐藏掉, 但是其在竖直方向的滚动效果仍然存在,也就达到了去除滚动条而仍然可以滚动的效果.

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

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js

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

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.