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

最新推荐文章于 2021-07-11 16:24:15 发布

急需三顿饭

最新推荐文章于 2021-07-11 16:24:15 发布

阅读量6k

点赞数 4

分类专栏： JavaScript 文章标签： easyui

本文链接：https://blog.csdn.net/jixusandunfan/article/details/56486829

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在做周进度统计的时候遇到了这个问题：页面后台返回的数据也就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方法，这样会很耗时间的，因为之前这列是隐藏的所以没有设定宽度，但是页面加载很慢，最终找到了是因为没有给这列添加固定宽度【百分比跟固定像素一样可以让其加载快，主要是设定固定宽度】，添加了之后就好了！