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

更新时间：2013年06月28日 16:31:05 作者：

一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:

功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>JavaScript Repeater控件</title> </head> <body> <div id="crossRate">  <table width="815" class="table-data"> <tr> <th>代码</th> <th>名称</th> <th>最新价</th> <th>涨跌额</th> <th>涨跌幅</th> <th>开盘</th> <th>最高</th> <th>最低</th> <th>昨收</th> </tr> </table>  <script type="text/template" id="crossRateHeader"> <table width="815" class="table-data"> <tr> <th>代码</th> <th>名称</th> <th>最新价</th> <th>涨跌额</th> <th>涨跌幅</th> <th>开盘</th> <th>最高</th> <th>最低</th> <th>昨收</th> </tr> </script> <script type="text/template" id="crossRateItem"> <tr> <td>{$dataRow[1]}</td> <td>{$dataRow[2]}</td> <td>{$dataRow[5]}</td> <td>{$dataRow[17]}</td> <td>{$dataRow[18]}</td> <td>{$dataRow[4]}</td> <td>{$dataRow[6]}</td> <td>{$dataRow[7]}</td> <td>{$dataRow[3]}</td> </tr> </script> <script type="text/template" id="crossRateFooter"> </table> </script> </div> <script> //View (function(ns){ function init(){ var container = document.getElementById("crossRate"); container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text); container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem").text); container.setAttribute("data-footertemplate", document.getElementById("crossRateFooter").text); } function render(dt){ var container = document.getElementById("crossRate"), headerhtml = container.getAttribute("data-headertemplate"), rowhtml = container.getAttribute("data-itemtemplate"), footerhtml = container.getAttribute("data-footertemplate"); var repater = new Repater(headerhtml,rowhtml,footerhtml); var dataRow = []; for(var i=0,n=dt.length; i<n; i++){ dataRow = dt[i].split(","); repater.set("dataRow",dataRow); repater.parse(); } container.innerHTML = repater.toHTML(); } ns.crossRate = { init: init, render: render, fill: function(data){ render(data); } }; ns.crossRate.init(); } (window)); //异步获取数据渲染数据data var datas = ["USDEUR0,USDEUR,美元欧元,0.7731,0.7732,0.7723,0.7734,0.7717,0,22913,0.0000,0,0,0.7731,0.0000,0,0,-0.0008,-0.10%,0.0000,1,3848,0,-1,1,0.0000,0.0000,2012-05-10 13:49:53,3","USDHKD0,USDHKD,美元港币,7.7625,7.7633,7.7621,7.7634,7.7617,0,14208,0.0000,0,0,7.7625,0.0000,0,0,-0.0004,-0.01%,0.0000,2,2062,0,-1,0,0.0000,0.0000,2012-05-10 13:49:49,3","USDJPY0,USDJPY,美元日元,79.71,79.73,79.62,79.77,79.57,0,25489,0.00,0,0,79.71,0.00,0,0,-0.09,-0.11%,0.00,1,4307,0,-1,-1,0.00,0.00,2012-05-10 13:50:13,3","USDCHF0,USDCHF,美元瑞郎,0.9285,0.9287,0.9276,0.9289,0.9266,0,29637,0.0000,0,0,0.9285,0.0000,0,0,-0.0009,-0.10%,0.0000,1,4960,0,-1,1,0.0000,0.0000,2012-05-10 13:50:02,3","GBPUSD0,GBPUSD,英镑美元,1.6134,1.6136,1.6138,1.6144,1.6121,0,20808,0.0000,0,0,1.6134,0.0000,0,0,0.0004,0.02%,0.0000,2,5381,0,-1,0,0.0000,0.0000,2012-05-10 13:50:04,3"]; //填充数据到view crossRate.fill(datas); //Repater模板控件 function Repater(headerhtml,rowhtml,footerhtml) { var _this = this; var n = 0; _this.cache = []; _this.dic = {}; _this.header = headerhtml; _this.row = rowhtml; _this.footer = '</table>'; if (headerhtml) _this.header = headerhtml; if (rowhtml) _this.row = rowhtml; if (footerhtml) _this.footer = footerhtml; _this.set = function(tag, val) { this.dic[tag] = val; }; _this.parse = function(dic) { var row = this.row, dic = dic || this.dic, re = /\{\$(\w+)(?:\[(\d+)\])?(?:\|(\w+))?\}/g, html; html = row.replace(re, function(a, b, c, d) { var val; if (typeof dic[b] == "undefined"){ return b; } if (dic[b].constructor == Array) { val = dic[b][c]; } else { val = dic[b]; } if (Repater[d] || window[d]) {//修饰符 val = (Repater[d] || window[d])(val); } return val; }); _this.cache[n++] = html; return html; }; _this.toHTML = function(args) { var cache = _this.cache, result; _this.cache = []; n = 0; result = _this.header + cache.join("") + _this.footer; for (i in args) { if (args.hasOwnProperty(i)) { result = result.replace("{$"+i+"}", args[i]); } } return result; }; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
Repeater

微信小程序实战之打卡时钟的绘制
这篇文章主要介绍了如何利用微信小程序制作一个打卡时钟，分为工作和休息两种状态，用户可以设置相应的时间，所有的时钟记录都会被保存下来，感兴趣的可以了解一下
2022-04-04
JavaScript数组push方法使用注意事项
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。这篇文章主要介绍了JavaScript数组push方法使用注意,需要的朋友可以参考下
2017-10-10
微信小程序可滑动月日历组件使用详解
这篇文章主要为大家详细介绍了微信小程序可滑动月日历组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
picChange 图片切换特效的函数代码
picChange图片切换特效的封装函数，能够根据图片html代码自动生成右下角的数字导航按钮。
2010-05-05
javascript实现获取图片大小及图片等比缩放的方法
这篇文章主要介绍了javascript实现获取图片大小及图片等比缩放的方法,涉及javascript针对图形图像相关属性获取与修改相关操作技巧,需要的朋友可以参考下
2016-11-11
js为鼠标添加右击事件防止默认的右击菜单弹出
本文为大家介绍下如何为使用js为鼠标添加右击事件防止默认的右击菜单弹出，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-07-07
VS Code转换大小写、修改选中文字或代码颜色的方法
最近在使用VS Code，发现了不少使用的小技巧，觉着有必要给大家分享下，下面这篇文章主要给大家介绍了关于VS Code转换大小写、修改选中文字或代码颜色的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-12-12
js生成二维码的示例代码
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
JavaScript html5 canvas绘制时钟效果(二)
这篇文章主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
2016-03-03
JS获取iframe中marginHeight和marginWidth属性的方法
这篇文章主要介绍了JS获取iframe中marginHeight和marginWidth属性的方法,涉及javascript操作iframe属性的技巧,并分析了marginHeight和marginWidth属性的功能,非常具有实用价值,需要的朋友可以参考下
2015-04-04