其实有点标题党了,呵呵,主要是项目的特殊性,出于性能考虑项目经理规定不能用任何服务端控件(包括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 >
< 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 >
欢迎转载 ,但请注明来自菩提树下的杨过 http://www.cnblogs.com/yjmyzz/archive/2009/06/19/1506849.html