当前位置： 移动技术网 > IT编程>开发语言>.net > asp.net使用jquery模板引擎jtemplates呈现表格

asp.net使用jquery模板引擎jtemplates呈现表格

2017年12月12日  | 移动技术网IT编程  | 我要评论

六合彩118期,兽人世界娶妻记,液体墙纸

在asp.net mvc 中，使得我们能够更加自由控制我们所想显示html。通常情况下，都要做一下数据列表。那么我们可以手动去拼一个表格出来，但这样有时对于复杂的表格说，那就js代码比较复杂了。我们可以借助js下的模板引擎，来实现这一功能。下面要介绍就是jtemplates，它也是基于jquery的。

复制代码 代码如下:

<%@ page language="c#" inherits="system.web.mvc.viewpage" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="content/default.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="scripts/jquery-jtemplates.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "post",
url: '<%=url.action("templetedata", "home") %>',
data: "{}",
contenttype: "application/json; charset=utf-8",
datatype: "json",
success: function(msg) {
//instantiate a template with data
applytemplate(msg);

}
});
});
function applytemplate(msg) {
$('#container').settemplate($("#templateresultstable").html());
$('#container').processtemplate(msg);
} 
</script>

</head>
<body>
<div id="container"> </div>
<%-- results table template --%>
<script type="text/html" id="templateresultstable"> 
{#template main} 
<table  cellpadding="10" cellspacing="0"> 
 <tr> 
<th>username</th> 
<th>password</th> 
<th>url</th> 
<th>email</th> 
<th>passportid</th> 
</tr>
{#foreach$tasuu}
{#includerowroot=$t.uu}
{#/for}
</table>
{#/templatemain}
{#templaterow}
<trclass="{#cyclevalues=['','evenrow']}">
<td>{$t.username.bold()}</td>
<td>{$t.password}</td>
<td>{$t.url.link($t.url)}</td>
<td>{$t.email.link('mailto:'+$t.email)}</td>
<td>{$t.passportid}</td>
</tr>
{#/templaterow}
</script>
</body>
</html>


通过ajax返回json数据，settemplate根据id设置模板，然后applytemplate就可以了。
cs代码:
复制代码 代码如下:

///<summary>
///templetesthedata.
///</summary>
///<returns></returns>
publicjsonresulttempletedata()
{
ilist<userentity>userlist=newlist<userentity>()
{
newuserentity(){username="tina",passportid=23433,email="asdfa@asdf.com",password="nkasd",url="http://www.gefds.cn"}
,newuserentity(){username="lucy",passportid=3444,email="2v2@asdf.com",password="v23sda",url="http://www.qqfsad.cn"}
};
returnjson(userlist);
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网