前端:renderer渲染方法的几种常见用法

最新推荐文章于 2025-04-08 20:10:44 发布

原创最新推荐文章于 2025-04-08 20:10:44 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了前端数据的转义处理，通过示例展示了如何根据数据值动态渲染按钮，并提供了一个天气预警的逻辑处理案例。内容包括：1.数据转义，用于安全展示敏感信息；2.行内按钮元素的添加，实现查阅和修改功能；3.根据特定条件进行实时逻辑处理，例如高温预警展示。这些技术增强了前端数据的展示与交互性。

1.对数据进行转义处理

eg:加载时执行该方法进行转义后再展示

<div name="is_test" field="is_test" width="100" headerAlign="center" allowSort="true" align="center" renderer="escape">是否测试</div>

/* 前端是否字段转义*/
function escape(e) {
	if(e.value==0){
		return '否';
	}else {
		return '是';
	}
}

2.在每个数据行增加按钮元素

eg:适用于需要在每行增加查阅、修改等功能按钮时

<div width="70" renderer="onEditrender" headerAlign="center" align="center">操作</div>

function onEditrender(e){
	 var record = e.record; 
	 var id = record.id;
	 var  s ='';
	 s = '<a class="Edit_Button" href="javascript:view(\''+id+'\');" >查阅</a>  <a class="Edit_Button" href="javascript:edit(\''+id+'\');" >修改</a>';   
     return s;
}

3.进行一些加载实时的逻辑处理，类似1，比如根据该行数据的某个值或某几个值做一些结果展示。