全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

BaiduTemplate模板引擎使用示例(附源码)

1、新建项目,asp.net 空Web应用程序

添加data,js,styles,templates文件夹,添加baiduTemplate.js,jquery.js,bootstrap.css

2、添加list.js脚本,代码如下

var data = {
 "list": [
 {
 "col1": "行1",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行2",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行3",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行4",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行5",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行6",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行7",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 },
 {
 "col1": "行8",
 "col2": "数据2",
 "col3": "数据3",
 "col4": "数据6",
 "col5": "数据5",
 "col6": "数据6"
 }
 ]
};
var template = "templates/list.html";
$.ajax({
 url: template,
 dataType: "html",
 success: function (val) {
 $("#list").html(baidu.template(val, data));
 }
});

添加模板文件list.html,内容如下

<table class="table table-bordered">
 <thead>
 <tr>
 <td>列1</td>
 <td>列2</td>
 <td>列3</td>
 <td>列4</td>
 <td>列5</td>
 <td>列6</td>
 </tr>
 </thead>
 <%for(var i = 0; i<list.length;i++){ var item=list[i];%>
 <tr>
 <td><%=item.col1%></td>
 <td><%=item.col2%></td>
 <td><%=item.col3%></td>
 <td><%=item.col4%></td>
 <td><%=item.col5%></td>
 <td><%=item.col6%></td>
 </tr>
 <%}%>
</table>

3、添加default.aspx页面,并添加引用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="baiduTemplate.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="js/jquery.min.js"></script>
 <script src="js/baiduTemplate.js"></script>
 <script src="js/list.js"></script>
 <link href="styles/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="list" style="margin-top:10px;">
 </div>
 </form>
</body>
</html>

预览效果:

源码下载:http://xiazai./201612/yuanma/baiduTemplate_jb51.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


# BaiduTemplate  # 模板引擎  # jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)  # 源码下载  # 应用程序  # 新建项目  # ajax  # url  # function  # success  # dataType  # html  # template  # val  # tr  # thead  # td  # item  # length  # gt  # xhtml  # baidu  # lt 


相关文章: 已有域名建站全流程解析:网站搭建步骤与建站工具选择  如何通过虚拟机搭建网站?详细步骤解析  高端建站如何打造兼具美学与转化的品牌官网?  建站之星后台管理:高效配置与模板优化提升用户体验  建站主机选哪种环境更利于SEO优化?  建站之星安全性能如何?防护体系能否抵御黑客入侵?  建站之星CMS五站合一模板配置与SEO优化指南  建站之星3.0如何解决常见操作问题?  建站之星如何快速更换网站模板?  如何在企业微信快速生成手机电脑官网?  如何用y主机助手快速搭建网站?  北京企业网站设计制作公司,北京铁路集团官方网站?  武汉网站制作费用多少,在武汉武昌,建面100平方左右的房子,想装暖气片,费用大概是多少啊?  如何快速搭建响应式可视化网站?  建站之星代理如何优化在线客服效率?  如何解决VPS建站LNMP环境配置常见问题?  如何快速搭建支持数据库操作的智能建站平台?  如何用腾讯建站主机快速创建免费网站?  广州网站建站公司选择指南:建站流程与SEO优化关键词解析  详解免费开源的.NET多类型文件解压缩组件SharpZipLib(.NET组件介绍之七)  相册网站制作软件,图片上的网址怎么复制?  公司网站的制作公司,企业网站制作基本流程有哪些?  移民网站制作流程,怎么看加拿大移民官网?  建站之星上传入口如何快速找到?  零基础网站服务器架设实战:轻量应用与域名解析配置指南  成都网站制作报价公司,成都工业用气开户费用?  建站之星代理如何获取技术支持?  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  手机网站制作与建设方案,手机网站如何建设?  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思?  建站主机数据库如何配置才能提升网站性能?  香港服务器网站推广:SEO优化与外贸独立站搭建策略  如何安全更换建站之星模板并保留数据?  如何通过老薛主机一键快速建站?  如何在万网主机上快速搭建网站?  家具网站制作软件,家具厂怎么跑业务?  ,网站推广常用方法?  nginx修改上传文件大小限制的方法  山东云建站价格为何差异显著?  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些?  C#如何序列化对象为XML XmlSerializer用法  如何快速上传自定义模板至建站之星?  山东网站制作公司有哪些,山东大源集团官网?  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt?  如何挑选高效建站主机与优质域名?  php8.4新语法match怎么用_php8.4match表达式替代switch【方法】  建站主机选虚拟主机还是云服务器更好?  如何快速生成高效建站系统源代码?  表情包在线制作网站免费,表情包怎么弄? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。