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

时间: 2024-08-04 05:26:52

Javascript版的Repeater控件实现的相关文章

使用嵌套的Repeater控件

控件 这个程序适用于:•Microsoft ASP.NET •Microsoft VS.NET 正式版 简介本文描述如何使用嵌套的Repeater 控件来显示分级数据 .当然了,你也可以将这一技术应用到其他的列表绑定控件上去,比如DataGrid包含DataGrid,DataList包含DataList等等的组合. 绑定到父表 1.添加一个新的Web Form 到应用程序项目中,名称为Nestedrepeater.aspx. 2.从工具箱托动一个Repeater 控件到这个页面上, 设定其ID

在Repeater控件中创建可隐藏区域

创建|控件 在WEB应用中,如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要.但不可忽视的是,多数情况下,对于数据的呈现方式也是十分重要的.由于web应用的规模不断增大,数据也越来越多了,有时候,由于在一个页面同时显示的数据太多,从而造成页面的不美观,用户因此也会感到厌倦和操作困难.因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果. 防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方

关于Repeater控件的使用

控件 关于Repeater控件的使用 Repeater控件是一个数据显示控件,该控件允许通过为列表中显示的每一项重复使用指定的模板来自定义布局. 要显示数据,必须先创建模板来绑定数据列表,模块定义如下(另见SDK): 模板 说明 AlternatingItemTemplate 与 ItemTemplate 元素类似,但在 Repeater 控件中隔行(交替项)呈现一次.通过设置 AlternatingItemTemplate 元素的样式属性,可以为其指定不同的外观. FooterTemplate

asp.net中Repeater控件用法笔记

  大家可能都对datagrid比较熟悉,但是如果在数据量大的时候,我们就得考虑使用repeater作为我们的数据绑定控件了.Repeater控件与DataGrid (以及DataList)控件的主要区别是在于如何处理HTML.ASP.NET建立HTML代码以显示DataGrid控件,但Repeater允许开发人员决定如何显示数据.所以,你可以选择将数据显示在一个HTML表格中或者一个顺序列表中.这主要取决于你的选择,但你必须将正确的HTML插入到 ASP.NET页面中. 模板与DataList

.net JS模拟Repeater控件的实现代码

功能强大的模板引擎大都需要对模板进行语法解析,会有性能问题.通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件,可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库. <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>JavaScript Repeater控件</title> </

为何用c#中的repeater控件邦定数据调试后,在浏览页面没有显示内容是空的?

问题描述 为何用c#中的repeater控件邦定数据调试后,在浏览页面没有显示内容是空的?IDAL.ICustomercust=newSQLServerDAL.SQLCustomer();IList<Model.Customer>cust1=cust.GetCustomers();this.Repeater1.DataSource=cust1;this.Repeater1.DataBind(); 解决方案 解决方案二:该回复于2008-05-27 13:20:49被版主删除解决方案三:Repe

asp.net学习之Repeater控件

原文:asp.net学习之Repeater控件     Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.     Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式.DataList控件也由模板驱动,和Repeater不同的是,DataList默认输出是HTML表格,DataList将数据源中的记录输出为HTML表格一个个的单元格. 1. Repeater控件显示数据     要使用Repeater控

详解ASP.NET数据绑定操作中Repeater控件的用法_实用技巧

一.绑定控件之Repeater.NET封装了多种数据绑定控件,诸如GridView.DataList等但该篇文章将会从Repeater入手,因为Repeater只提供了基本的数据绑定模板,没有内置其它分页等功能,所以它是最原始的数据绑定控件,只要能够熟练运用Repeater控件其它的绑定控件也就很简单了.1.Repeater简介Repeater 控件是基本模板化数据列表. 它不像GridView控件一样能够可视化的设计格式或样式,因此开发时在控件模板中必须显式声明所有格式.格式和样式标记.另外R

给Repeater控件里添加序号的5种才常见方法介绍_实用技巧

.net是目前非常热门的一种程序编译语言,在.net培训中的众多知识点中,给Repeater控件里添加序号的5种方法是非常重要的一个.下面就由达内的老师为大家介绍一下这方面的内容. Repeater是我们经常用的一个显示数据集的数据控件,经常我们希望在数据前显示数据的序号,那么我们该怎么为Repeater控件添加序号呢?下面编辑为大家介绍几种常用的为Repeater控件添加序号的方法: 方法一: 利用Container.ItemIndex属性,代码如下: 复制代码 代码如下: <Itemtemp