自己写的一个jquery模板引擎(json比较好用)

还是一个未完成的项目,缺乏对if等的支持,希望大家能提供一下参考的意见,让我把它 写完

js代码部分

1 /// <reference path="jquery-1.3.2-vsdoc.js" /> 2 var 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": "西站到北京体育馆公交几路啊\r\n", "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(/\&gt;/ig, ">").replace(/\&lt;/ig, "<");2627        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");3132        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);4445        });46        if (jQuery.isFunction(setting.callback)) { setting.callback(); } //执行函数47        _self.show(setting.showTime);48        return _self;49    }50})(jQuery);5152$(document).ready(function() {53    //$("#alert1").click(function() {54        $("#temp").jsonTemplateEngine(json.rows, { "callback": function() { $("#output").html(json.total); } });55    //});56});

页面代码部分

<div id="temp" style="display:none">
    <h5><span class="fL"><b><#QUserName#></b> 提问: </span><span class="gray fR">提问于 <#QDate#></span></h5>
           <div class="queCon">
              <p><#Question#></p>
               <#/if(<#Answer#>!=null) #><p><#Answer#></p>
               <#/else#>
               <p class="reaCon">大麦票务客服  回 答于<span class="f10"><#ADate#></span></p>
              </div> <#/end#>
            </div>
   
 <div id="alert1" style="margin-left:100px"><a href="javascript:void(0)">加载一下</a></div>  
<div id="output"></div>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索function
, 电影票务系统设计
, 北京
, question
, JSON”未定义
游客
json模板引擎、jquery 模板引擎、jquery html模板引擎、jquery前端模板引擎、jquery json html模板,以便于您获取更多的相关知识。

时间: 2025-01-01 13:21:14

自己写的一个jquery模板引擎(json比较好用)的相关文章

asp.net使用jquery模板引擎jtemplates呈现表格

这篇文章主要介绍了asp.net使用jquery模板引擎jtemplates呈现表格的示例,大家参考使用吧 在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的.  代码如下: <%@ Page Language="C#" Inheri

10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易.  本文整理了10 款基于JavaScript和jQuery的模板引擎,希望能对你的开发工作带来一些帮助.  1. NANO  最简单的jQuery模板引擎,完美实现对JSON的解析.  源码 / 演示  2. The "template" binding  该工具通过渲染模板将相关联的DOM元

asp.net使用jquery模板引擎jtemplates呈现表格_实用技巧

在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的. 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!D

自写的一个jQuery圆角插件_jquery

原理是利用1px的div,具体实现看代码. 使用方法: 复制代码 代码如下: $('.test').rounder(); 这样会根据默认的设置产生一个圆角框,效果如图: 圆角处会有点锯齿:(如果仅此而已,那肯定是不够的.我们会想加上自己的一个样式该怎么办?使用方法: 复制代码 代码如下: $('.test').rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'}); 效果如图: 接下来我就来讲讲实现过程了,先附上jQuer

Java写的一个双向链表模板,出了点问题,应用不了自己写的内部类,却能应用String类

问题描述 package com.read.List;public class DbLinkedList<T> {//定义内部类,用作链表的节点 private class Node<T> { Node<T> pre; //指向前一个节点 Node<T> next; //指向后一个节点 T value; //当前节点的值 public Node(T value, Node<T> next, Node<T> pre) { this.va

PHP的常用的几大模板引擎

SmartySmarty的特点是将模板编译成PHP脚本,然后执行这些脚本.很快,非常灵活. Heyes Template Class一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离. FastTemplate一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理. ShellPage一个简单易用的类,可以让你的整个网站布局基于模板文件,修改模板就能改变整个站点. STP Simple Template Parser一个简单.轻量级并且易于

分享25个顶级PHP模板引擎整理

为了找到一个好的模板引擎,我在互联网上进行搜索,目前已经整理出了以下名单: Smarty Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本.很快,非常灵活. Heyes Template Class 一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离. FastTemplate 一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理. ShellPage 一个简单易用的类,可以让你的整个网站布局基于模板文件,修改模板就能改变整个

二十五个顶级PHP模板引擎整理

   为了找到一个好的模板引擎,我在互联网上进行搜索,目前已经整理出了以下名单: Smarty   Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本.很快,非常灵活. Heyes Template Class   一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离. FastTemplate   一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理. ShellPage   一个简单易用的类,可以让你的整个网站布局基于模板文件

需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析_php模板

Smarty Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本.很快,非常灵活. Heyes Template Class 一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离. FastTemplate 一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理. ShellPage 一个简单易用的类,可以让你的整个网站布局基于模板文件,修改模板就能改变整个站点. STP Simple Template Parser 一个简单.轻量