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 });