BaiduTemplate engine example (source code), baidutemplate Template
1. Create a project and asp.net empty Web Application
Upload data, JS, styles, templatesfolder, and baidutemplate.js, jquery.js, bootstrap.css
2. Add the list. js script with the following code:
Var data = {"list": [{"col1": "Row 1", "col2": "data 2", "col3": "data 3 ", "col4": "data 6", "col5": "data 5", "col6": "data 6" },{ "col1": "Row 2 ", "col2": "Data 2", "col3": "Data 3", "col4": "data 6", "col5": "data 5", "col6 ": "data 6" },{ "col1": "Row 3", "col2": "Data 2", "col3": "Data 3", "col4 ": "data 6", "col5": "data 5", "col6": "data 6" },{ "col1": "Row 4", "col2 ": "Data 2", "col3": "Data 3", "col4": "data 6", "col5": "data 5", "col6 ": "data 6" },{ "col1": "Row 5", "col2": "Data 2", "col3": "Data 3", "col4 ": "data 6", "col5": "data 5", "col6": "data 6" },{ "col1": "Row 6", "col2 ": "Data 2", "col3": "Data 3", "col4": "data 6", "col5": "data 5", "col6 ": "data 6" },{ "col1": "Row 7", "col2": "Data 2", "col3": "Data 3", "col4 ": "data 6", "col5": "data 5", "col6": "data 6" },{ "col1": "Row 8", "col2 ": "Data 2", "col3": "Data 3", "col4": "data 6", "col5": "data 5", "col6 ": "data 6"}]}; var template = "templates/list.html"; $. ajax ({url: template, dataType: "html", success: function (val) {$ ("# list" ).html (baidu. template (val, data ));}});
The following figure shows the template file list.html.
<Table class = "table-bordered"> <thead> <tr> <td> column 1 </td> <td> Column 2 </td> <td> column 3 </td> <td> column 4 </td> <td> Column 5 </td> <td> column 6 </td> </tr> </thead> <% for (var I = 0; I <list. length; I ++) {var item = list [I]; %> <tr> <td> <% = item. col1 %> </td> <% = item. col2 %> </td> <% = item. col3 %> </td> <% = item. col4 %> </td> <% = item. col5 %> </td> <% = item. col6 %> </td> </tr> <% }%> </table>
3. Add the default. aspx page and add reference
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="baiduTemplate.Default" %><!DOCTYPE html>Preview effect:
Source code download
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
