1、新建项目，asp.net 空Web应用程序
添加data,js,styles,templates文件夹，添加baiduTemplate.js,jquery.js,bootstrap.css
2、添加list.js脚本，代码如下
|
vardata = { "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" } ] }; vartemplate ="templates/list.html"; $.ajax({ url: template, dataType:"html", success:function(val) { $("#list").html(baidu.template(val, data)); } }); |
添加模板文件list.html，内容如下
|
<tableclass="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++){ varitem=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> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title></title> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/baiduTemplate.js"></script> <scriptsrc="js/list.js"></script> <linkhref="styles/bootstrap.css"rel="stylesheet"/> </head> <body> <formid="form1"runat="server"> <divid="list"style="margin-top:10px;"> </div> </form> </body> </html> |
预览效果：