• 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 });
        
  • 相关阅读:
    js 点击复制内容
    tp5 日志的用途以及简单使用
    iOS UIKit:TableView之表格创建(1)
    Linux平台的boost安装全解
    iOS UIKit:CollectionView之布局(2)
    iOS UIKit:CollectionView之设计 (1)
    iOS 网络编程:socket
    Objective-C:内存管理
    iOS UIKit:TabBar Controller
    iOS UIKit:Navigation Controllers
  • 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/9648130.html
Copyright © 2020-2023  润新知