码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-09-14 20:01:46      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:src   图片   cat   遇到   分享   nload   r++   页面   遇到的问题   

 问题背景:
在做打印页面的时候,要求有详细的默认展开显示。 
 
遇到的问题:
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 });

 

    

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

标签:src   图片   cat   遇到   分享   nload   r++   页面   遇到的问题   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!