Javascript版的Repeater控件实现
时间:2022-04-23
本文章向大家介绍Javascript版的Repeater控件实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
其实有点标题党了,呵呵,主要是项目的特殊性,出于性能考虑项目经理规定不能用任何服务端控件(包括Repeater控件),同时尽量减少服务端处理,并尽可能压缩最终生成的html源代码,所以只用JS实现。
代码:
<html>
<head>
<title>JavaScript的Repeater控件实现--made by 菩提树下的杨过</title>
<script type="text/javascript">
/*
hashTable的javascript实现
*/
function hashTable() {
this.__hash = {};
//添加key-value键值对
this.add = function(key, value) {
if (typeof (key) != "undefined") {
//if it not contains in hashtable
if (!this.contains(key)) {
this.__hash[key] = typeof (value) == "undefined" ? null : value;
return true;
}
else {
return false;
}
}
};
//删除key-value键值对
this.remove = function(key) {
delete this.__hash[key];
};
this.count = function() {
var i = 0;
for (var obj in this.__hash) {
i++;
}
return i;
};
//取得指定键值
this.items = function(key) {
return this.__hash[key];
};
//检查是否包含指定键
this.contains = function(key) {
return typeof (this.__hash[key]) != "undefined";
};
//清空哈希表
this.clear = function() {
for (var obj in this.__hash) {
delete this.__hash[k];
}
};
}
//替换字符串函数(strReplace中如果有正则表达式的特殊字符串,可能会出错)
function replace(strSource, strReplace, strDestination) {
var reg = new RegExp(strReplace, "g");
return strSource.replace(reg, strDestination);
}
/*测试replace函数
var s = "a1{0}2{0}3";
s = replace(s,"\{0\}","***");
alert(s);
*/
</script>
</head>
<body>
<div id="Repleater1">
</div>
<script type="text/javascript">
//模板替换开始
var _sData = "1,2,3|a,b,c|x,y,z"; //实际数据字符串(服务端输出)
var _arrData = _sData.split("|"); //数据数组
var _template = "<div>{1}--{2}--{3}--{2}</div>"; //数据行模板
var _fields = ['1', '2', '3']; //模板中包含的标识数组
var _html = "";
for (var i = 0; i < _arrData.length; i++) {
var _htmlRows = _template; //初始行默认为行模板
var _arrTemp = _arrData[i].split(",");
var _hash = new hashTable();
//将模板标识与实际数据,变成key-value键值对
for (var j = 0; j < _fields.length; j++) {
_hash.add(_fields[j], _arrTemp[j]);
_htmlRows = replace(_htmlRows, "\{" + _fields[j] + "\}", _hash.items(_fields[j]))//根据模板标识替换为实际数据
}
_html += _htmlRows;
}
document.getElementById("Repleater1").innerHTML = _html;
</script>
</body>
</html>
欢迎转载 ,但请注明来自菩提树下的杨过
- 碎片化 | 第四阶段-56-ManyToOne和OneToMany映射关系-视频
- 基于网络流量的SDN最短路径转发应用
- 碎片化 | 第四阶段-57-hibernate二级缓存-视频
- NoSQL篇 | NoSQL从小白到码神 之 Redis篇
- Neutron和ONOS集成实践
- 基于OpenDaylight和OVSDB搭建VxLAN网络
- 史上最强----机器学习经典总结---入门必读
- SDNLAB群分享(四):利用ODL下发流表创建VxLAN网络
- Neutron集成ONOS源码分析
- “访问限制”&“代理访问”实验
- OpenDaylight Lithium-SR2 Cluster集群搭建
- Linux | CentOS7下会玩JDK不?你确定?
- Linux | 不懂Linux的码神,不是真正的菜鸟
- 初体验Spring Boot 2支持的HikariCP连接池
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- @RequestMapping与@RequestParam注解
- SpringMVC简介与工程配置
- KVM管理虚拟机
- fpga实现YCbCr444转RGB
- UML类图自动生成,太爽了
- Python爬虫之mongodb介绍和安装
- 一句话说清楚 CountDownLatch 和 CyclicBarrier 的区别
- Android 功耗(8)---如何找到阻止进入deep idle SODI的元凶
- 【技术创作101训练营】三种不同场景下 vue 组件动态加载的方法及实现
- leetcode链表之回文链表
- 如何理解 Go 中的反射
- Synchronized深入分析
- Spring的一些零碎知识点整理
- CentOS7上安装并配置KVM,以及通过KVM安装CentOS系统
- 建议收藏 哭着喊着 从C语言转向C++刷算法