欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何使用BaiduTemplate模板引擎

来源:本站整理 作者:佚名 时间:2017-01-01 TAG: 我要投稿

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,内容如下
 class="table table-bordered">
 
 
  列1
  列2
  列3
  列4
  列5
  列6
 
 
 for(var i = 0; ilist.length;i++){ var item=list[i];%>
 
  item.col1%>
  item.col2%>
  item.col3%>
  item.col4%>
  item.col5%>
  item.col6%>
 
 %>
3、添加default.aspx页面,并添加引用
 Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="baiduTemplate.Default" %>
 xmlns="http://www.w3.org/1999/xhtml">
 runat="server">
 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
  src="js/jquery.min.js">
  src="js/baiduTemplate.js">
  src="js/list.js">
  href="styles/bootstrap.css" rel="stylesheet" />
  id="form1" runat="server">
  id="list" style="margin-top:10px;">
 
 
预览效果:

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载