全网整合营销服务商

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

免费咨询热线: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 


相关文章: 小型网站建站如何选择虚拟主机?  如何在IIS7上新建站点并设置安全权限?  深圳网站制作的公司有哪些,dido官方网站?  h5在线制作网站电脑版下载,h5网页制作软件?  网站制作的步骤包括,正确网址格式怎么写?  宝塔建站助手安装配置与建站模板使用全流程解析  Android自定义listview布局实现上拉加载下拉刷新功能  建站之星体验版:智能建站系统+响应式设计,多端适配快速建站  深圳网站制作案例,网页的相关名词有哪些?  网站制作难吗安全吗,做一个网站需要多久时间?  如何在自有机房高效搭建专业网站?  香港网站服务器数量如何影响SEO优化效果?  如何快速搭建支持数据库操作的智能建站平台?  制作企业网站建设方案,怎样建设一个公司网站?  建站之星手机一键生成:多端自适应+小程序开发快速建站指南  网站建设制作、微信公众号,公明人民医院怎么在网上预约?  建站之星后台密码遗忘或太弱?如何重置与强化?  购物网站制作费用多少,开办网上购物网站,需要办理哪些手续?  如何在IIS中新建站点并配置端口与IP地址?  如何用搬瓦工VPS快速搭建个人网站?  东莞专业制作网站的公司,东莞大学生网的网址是什么?  如何通过虚拟主机空间快速建站?  装修招标网站设计制作流程,装修招标流程?  Java解压缩zip - 解压缩多个文件或文件夹实例  建站之星在线版空间:自助建站+智能模板一键生成方案  ,网页ppt怎么弄成自己的ppt?  高性能网站服务器配置指南:安全稳定与高效建站核心方案  深圳网站制作平台,深圳市做网站好的公司有哪些?  小捣蛋自助建站系统:数据分析与安全设置双核驱动网站优化  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置?  网站制作公司排行榜,四大门户网站排名?  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  宝塔面板创建网站无法访问?如何快速排查修复?  股票网站制作软件,网上股票怎么开户?  深圳网站制作培训,深圳哪些招聘网站比较好?  如何续费美橙建站之星域名及服务?  ,有什么在线背英语单词效率比较高的网站?  电影网站制作价格表,那些提供免费电影的网站,他们是怎么盈利的?  开封网站制作公司,网络用语开封是什么意思?  活动邀请函制作网站有哪些,活动邀请函文案?  C#如何使用XPathNavigator高效查询XML  如何快速打造个性化非模板自助建站?  建站主机选哪家性价比最高?  怎么将XML数据可视化 D3.js加载XML  再谈Python中的字符串与字符编码(推荐)  5种Android数据存储方式汇总  成都品牌网站制作公司,成都营业执照年报网上怎么办理?  电脑免费海报制作网站推荐,招聘海报哪个网站多?  制作公司内部网站有哪些,内网如何建网站?  香港服务器选型指南:免备案配置与高效建站方案解析 

您的项目需求

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