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 >

 

欢迎转载 ，但请注明来自菩提树下的杨过 http://www.cnblogs.com/yjmyzz/archive/2009/06/19/1506849.html