自己写的一个jquery模板引擎(json比较好用)
2010-09-14 13:45:44 来源:WEB开发网还是一个未完成的项目,缺乏对if等的支持,希望大家能提供一下参考的意见,让我把它写完
js代码部分
1/// <reference path="jquery-1.3.2-vsdoc.js" />
2var json = { "result": "success", "total": 3, "page": 1, "rows": [{ "QuestionID": 45233, "QUserName": "游客", "Question": "我80多岁坐轮椅的母亲买了一张首都体育馆看排球的门票,她担心残疾人能否进去看,有没有残疾人看球平台和通道", "Answer": "您好!我们这里没有代理奥运会门票,您可以通过其他方式查询。感谢您对大麦票务的支持!", "QDate": "2008-8-18 9:44:20", "ADate": "2008-8-18 9:48:27" }, { "QuestionID": 39672, "QUserName": "游客", "Question": "在左安路到首都体育馆公交几路?", "Answer": null, "QDate": "2008-3-3 10:25:34", "ADate": null }, { "QuestionID": 36942, "QUserName": "游客", "Question": "西站到北京体育馆公交几路啊rn", "Answer": "您好:从北京西站南广场出发,乘坐122路下行(北京西站东-北京站东),在永定门东换乘36路环线(左安路-左安路),抵达北京体育馆. 约16.41公里就可以抵达北京体育馆。感谢您对中国票务在线的支持!", "QDate": "2007-12-20 18:05:15", "ADate": "2007-12-21 9:40:26"}] };
3(function($) {
4 jQuery.fn.jsonTemplateEngine = function(jsonData, options) {
5 var setting = jQuery.extend({
6 exLeft: "<#", //匹配的左边限定符
7 exRight: "#>", //匹配的右边限定符
8 tempDate: "TemplateData", //jquery存储data所用的名称
9 appTo: null, //其他需要显示的对象,如果为空,则自身输出
10 showTime: 500,
11 callback: function() { } //处理完成后的自定义函数
12 }, options);
13 if (this.size() <= 0 || jsonData.length <= 0) { return this; }
14 var TemplateHtml;
15 if (this.data(setting.tempDate) != undefined) {
16 TemplateHtml = this.data(setting.tempDate);
17 }
18 else {
19 TemplateHtml = this.html();
20 this.data(setting.tempDate, TemplateHtml);
21 }
22 var _self = setting.appTo == null ? this : jQuery(setting.appTo); //如果是appTo追加到其他对象里面
23 _self.empty().hide();
24 //针对<,>被编码过后的处理问题
25 TemplateHtml = TemplateHtml.replace(/>/ig, ">").replace(/</ig, "<");
26
27 var specials = ["$", "^", "?", "/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\"];
28 var escapeRegex = new RegExp("(\" + specials.join("|\") + ")", "g");
29 var escapedLeft = setting.exLeft.replace(escapeRegex, "\$1");
30 var escapedRight = setting.exRight.replace(escapeRegex, "\$1");
31
32 var re = new RegExp(escapedLeft + "(\w+)" + escapedRight, "ig");
33 var arr = TemplateHtml.match(re);
34 jQuery.each(jsonData, function(i) {
35 var temp = TemplateHtml;
36 jQuery.each(arr, function(n) {
37 var obj = arr[n].replace(new RegExp(escapedLeft, "ig"), "").replace(new RegExp(escapedRight, "ig"), "");
38 temp = temp.replace(new RegExp(escapedLeft + obj + escapedRight, "ig"), eval("jsonData[" + i + "]." + obj));
39 //temp = temp.replace(new RegExp(escapedLeft + "/if[\s\S]*?/end" + escapedRight, "ig"), "11");
40 var funs = temp.match(new RegExp(escapedLeft + "/if[\s\S]*?/end" + escapedRight, "ig"));
41 alert(funs);
42 });
43 _self.append(temp);
44
45 });
46 if (jQuery.isFunction(setting.callback)) { setting.callback(); } //执行函数
47 _self.show(setting.showTime);
48 return _self;
49 }
50})(jQuery);
51
52$(document).ready(function() {
53 //$("#alert1").click(function() {
54 $("#temp").jsonTemplateEngine(json.rows, { "callback": function() { $("#output").html(json.total); } });
55 //});
56});
- ››自己写的一个php基于phpQuery的通用采集类
- ››jquery .ajax方法 异步表单,接收服务器返回的数据...
- ››jquery 添加\删除 cookie
- ››jquery 正则表达式判断是否为正确邮箱格式
- ››jQuery EasyUI 数字框(NumberBox)用法
- ››JQuery中对option的添加、删除、取值
- ››JQuery实现下拉,单选,复选三大控件方法,
- ››jquery实现判断输入文字个数的代码
- ››jQuery bxCarousel实现图片滚动切换效果
- ››jQuery弹性滑动导航菜单
- ››jquery实现全选反选功能
- ››jQuery 屏蔽单个元素使用户无法点击
更多精彩
赞助商链接