1、新建项目，asp.net空网应用程序

添加数据、js、样式、模板文件夹，添加baiduTemplate.js，jquery.js，bootstrap.css

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

定义变量数据={ 'list': [ { 'col1': '行1 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行2 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行3 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行4 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行5 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行6 ','第2栏' : '数据2', 第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行7 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' }，{ 'col1': '行8 ','第2栏' : '数据2 ','第3栏' : '数据3 ','第四栏' : '数据6 ','第5栏' : '数据5 ','第6栏' : '数据6' } ]}; 定义变量模板='模板/列表。html '；$.ajax({ url:模板，数据类型： 'html '，成功：函数(val) { $('#list ').html(baidu.template(val，data))；}});添加模板文件list.html，内容如下

table class=' table table-bordered '和tr td列1 TD/TD列2 TD/TD列3 TD/TD列4 TD/TD列5 TD/TD列6/TD/tr/thead %为(var I=0；ilist . lengthi){ var item=list[I]；% tr TD %=物品。第1栏%/TD TD %=项目。第2栏%/TD TD %=项目。第3栏%/TD TD %=项目。第4栏%/TD TD %=项目。第5栏%/TD TD %=项目。第6栏%/TD/tr % } %/表3、添加default.aspx页面，并添加引用

% @ Page Language=' c# ' AutoEventWireup=' true '代码在=' default '之前。aspx。cs ' Inherits=' baiduTemplate .默认的"%!DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8///div/表单/正文/html预览效果：

源码下载：http://夏仔。JB 51。net/201612/马援/baiduTemplate_jb51.rar

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