关于EasyUI中的treegrid数据在页面加载慢的问题

在做周进度统计的时候遇到了这个问题:页面后台返回的数据也就200多k,但是页面得卡5秒左右才能显示出来,而且折叠树的时候页面也反应很慢,经过仔细查阅终于找到了问题的所在:

有问题的代码:

$('#tg1').treegrid({
			striped : true,
		    rownumbers: false,
		    autoRowHeight: true,
		    idField:'id',
		    treeField: 'itemName',
		    singleSelect: true,
		    checkOnSelect: true,
		    collapsible:true,
		    method:'GET',
			url: "${Config.baseURL}prj/pcditemfinal/getWeekScheduleReports?week="+week+"&year="+year+"&level="+level,
		    columns:[[    
 		        {field:'id',title:'id',hidden:true},    
// 		        {field:'prjName',title:'工程名称',width:140,align:'left'}, 
		        {field:'itemName',title:ApplicationResources.project_pcd_statisticalItemName,width:'15%',halign:'center'}, 
		        {field:'unit',title:ApplicationResources.project_pcdyearplan_unit,align:'center',width:'9%'},
		        {field:'designWorkvalue',title:ApplicationResources.project_pcdyearplan_designWorkvalue,width:'10%',align:'center'},
		        {field:'monthPlanWorkvalue',title:ApplicationResources.project_yearplanandplananalyze_monthplan,width:'9%',align:'center'},
		        {field:'thisWorkvalue',title:ApplicationResources.project_pcdmonthinfo_weeksjwc,align:'center',width:'9%'},
		        {field:'factMonthWorkvalue',title:ApplicationResources.project_yearplanandplananalyze_monthlsjwc,width:'10%',align:'center'},
		        {field:'factWorkvalue',title:ApplicationResources.project_pcdmonthinfo_klsjwc,width:'9%',align:'center'},
		        {field:'thisWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_weekjdplbl,align:'center',width:'10%'},
		        {field:'monthWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_monthjdplbl,align:'center',width:'10%'},
		        {field:'startWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_startwcbl,width:'9%',align:'center'}
		    ]]    
		}); 

修改后好的代码:【修改之后页面加载速度快了好多!】

 

 

$('#tg1').treegrid({
			striped : true,
		    rownumbers: false,
		    autoRowHeight: true,
		    idField:'id',
		    treeField: 'itemName',
		    singleSelect: true,
		    checkOnSelect: true,
		    collapsible:true,
		    method:'GET',
			url: "${Config.baseURL}prj/pcditemfinal/getWeekScheduleReports?week="+week+"&year="+year+"&level="+level,
		    columns:[[    
// 		        {field:'id',title:'id',hidden:true,width:'100'},    
// 		        {field:'prjName',title:'工程名称',width:140,align:'left'}, 
		        {field:'itemName',title:ApplicationResources.project_pcd_statisticalItemName,width:'15%',halign:'center'}, 
		        {field:'unit',title:ApplicationResources.project_pcdyearplan_unit,align:'center',width:'9%'},
		        {field:'designWorkvalue',title:ApplicationResources.project_pcdyearplan_designWorkvalue,width:'10%',align:'center'},
		        {field:'monthPlanWorkvalue',title:ApplicationResources.project_yearplanandplananalyze_monthplan,width:'9%',align:'center'},
		        {field:'thisWorkvalue',title:ApplicationResources.project_pcdmonthinfo_weeksjwc,align:'center',width:'9%'},
		        {field:'factMonthWorkvalue',title:ApplicationResources.project_yearplanandplananalyze_monthlsjwc,width:'10%',align:'center'},
		        {field:'factWorkvalue',title:ApplicationResources.project_pcdmonthinfo_klsjwc,width:'9%',align:'center'},
		        {field:'thisWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_weekjdplbl,align:'center',width:'10%'},
		        {field:'monthWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_monthjdplbl,align:'center',width:'10%'},
		        {field:'startWorkDeviationRatio',title:ApplicationResources.project_pcdmonthinfo_startwcbl,width:'9%',align:'center'}
		    ]]    
		}); 


区别在于{field:'id',title:'id',hidden:true,width:'100'}, 这一列的设定,因为如果不给列指定宽度的话,页面加载数据的时候,会调用EasyUI中的autosizecolumn方法,这样会很耗时间的,因为之前这列是隐藏的所以没有设定宽度,但是页面加载很慢,最终找到了是因为没有给这列添加固定宽度【百分比跟固定像素一样可以让其加载快,主要是设定固定宽度】,添加了之后就好了!

 

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值