|
此文章由 dalaohu 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 dalaohu 所有!转贴必须注明作者、出处和本声明,并保持内容完整
很久以前写的一个demo, Ajax binding data collection to a template. 你看看中不中。
用到的是jQuery, jTemplate, BlockUI
<script type="text/javascript">
$("#btnJTemplate").click(function()
{
$.ajaxDotNet(webserviceUrl + 'GetAllCustomerJSJson', {
verb: 'POST',
success: function(obj)
{
var data = {
name: 'Get all firstname = "Jon"',
//list_id: 4,
table: JSON.parse(obj.d)
};
$("#result1").setTemplateElement("template");
$("#result1").processTemplate(data);
//block UI
$("#result1").block({ message: "Loading...", centerX: false, centerY: false,
css: { top: '0%', left: '80%',
height: '30px', width: '150px',
backgroundColor: '#ff0000', border: 'none', color: '#fff'}
});
setTimeout(unblock, 2000); //unblock after 2 secs
},
other: function()
{
//Do Everything else
alert("get all Program aborted");
}
});
});
function unblock()
{
$("#result1").unblock()
}
</script>
<a href="#" id="btnJTemplate">Get All FirstName='Jon'</a>
(Call WCF service, display data in table, Gmail style loading)
<!-- Template content (Valid XHTML 1.1) -->
<p style="display:none">
<textarea id="template" rows="0" cols="0">
<![CDATA[
<strong>{$T.name}: {$T.list_id}</strong>
<table>
<th>ID</th><th>Title</th><th>FirstName</th><th>LastName</th>
{#foreach $T.table as record}
<tr>
<td>{$T.record.ContactID}</td>
<td>{$T.record.Title}</td>
<td>{$T.record.FirstName}</td>
<td>{$T.record.LastName}</td>
</tr>
{#/for}
</table>
]]>
</textarea>
</p>
<div id="result1" class="jTemplatesTest"></div> |
评分
-
查看全部评分
|