EAS树形分录表单前端性能优化总结（合约规划单据为例）

EAS树形分录表单前端性能优化总结（合约规划单据为例）原创

前端&控件

CRU杨少博

1人赞赏了该文章 212次浏览编辑于2022年01月04日 18:32:33

EAS树形分录表单前端性能优化总结（合约规划单据为例）

背景：由于我们EAS房地产许多单据采用的是编辑表格显示树形数据，如合约规划、目标成本、动态成本等。如果数据量变大后，界面初始化加载时就会有性能问题，少则2分钟，多则10分钟。用户体验很差。因此我们必须进行此处的性能优化。

优化手段：

单据需要采用平台提供的虚加载模式（不用一次全部加载，只加载当前页的上一页和下一页）。单据改造需要进行如下几点

选中表格 - 高级-分页显示设置为是
选中表格 - 高级-显示行号设置为是
选中表格 - 高级-数据折行显示设置为是
选中表格 - 高级-是否为树表设置为是，并且必须配置树形列、列表父字段名
添加页面渲染事件
renderBefore代码如下，主要设置冻结列和表格是否虚加载

function(e){
	_self.setInitComponentCallBack(function(type, option, el){
		var model = pageModule.currentModel;
		if(type == 'grid') {
			if(option.id == 'conProgGrid' && option.treeGrid) {
				option.ExpandColumn = 'simpleName';
				option.expColInd = 2;
				ReCommonUtil.addExpandedForGridData(model.entries);
				option.colModel[0].frozen = true;
				option.colModel[1].frozen = true;
			}else if(option.id == 'costAccountGrid' && option.treeGrid) {
				option.expColInd = 3;
				option.colModel[0].frozen = true;
				option.colModel[1].frozen = true;
			}
			option.gridview = false;
		  //开启分页的情况设置为树表虚模式滚动加载
			if(option.includePager){
				 option.treeVirtual = true;
			  	  option.pagerModel = "virtual";
			}else{
				 option.pagerModel = "block";
			}

			// 设置冻结列
			option.frozenColumn = true;
			option.frozenColumns = true;
			option.isFrozenColumn = true;

			option.parentId = 'parent.id';
		}
	});
}

以上设置完成后，需要设置和平台开发确认（罗君、丁陈）确认web框架最新补丁，需要打平台最新补丁。

赞 1

赞 1 评论 1 收藏 1

收起

EAS树形分录表单前端性能优化总结（合约规划单据为例）

恭喜您！