jquery ajax填充html表 [英] jquery ajax fill html table
本文介绍了jquery ajax填充html表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果我有一张桌子
< table>
< thead>
< tr> Col1< / tr>
< tr> Col2< / tr>
< tr> Col3< / tr>
< / thead>
< tbody>
< / tbody>
< / table>
什么是用包含我的数据库数据的tr元素填充tbody最快，最有效的方法使用Jquery Ajax。 （除非你有更好的方法）
从webservice返回html代码或者在javascript中动态创建html代码？
另外，我还必须支持用户向下钻取;即单击>或双击该行以打开一个窗格以显示更多信息（包括另一个表和由单独的web服务返回的一些详细信息）
感谢各位的支持！
使用jQuery和AJAX的大规模企业门户。我实现了 jQuery模板 和 jQuery TableSorter插件 来实现这一点。以下是一些示例代码： Javascript（数据提供程序）：Data.Lists.js
myorg.data.list.GetListItems（{
webURL：http://our.awesome.portal.com/Lists，
listName： Projects List，
caml：caml，
CAMLRowLimit：6，
callback：function（data）{
var list = {};
// code here在绑定
list.items = data;
var templateHtml = $（'。ptMyProjects'）。html（）
.replace（<！ - ， ）.replace（ - >，）;
var html = $ .tmpl（templateHtml，list）;
$（'。ptMyProjects'）。html（html）;
$ make sortable table
$（'。ptMyProjects .tablesorter'）。tablesorter（{
sortList：[[0,0]]，
headers：{3：{sorter： false}}，
widgets：['zebra']
}）;
// class last row
$（'。ptMyProjects .tablesorter t head'）。last（）。addClass（'last'）;
// add hover effect
$（'。ptMyProjects .tablesorter tbody tr，.tablesorter thead .header'）。hover（function（）{
$（this）.addClass（'hover '）;
}，function（）{
$（this）.removeClass（'hover'）;
}）;
//添加工具提示
$（'。ptMyProjects .vg_icon'）。tipsy（{gravity：'s'}）;
}
}）;
HTML（模板）
< div class =ptMyProjects ptTemplate>
<！ -
< table class =tablesorterborder =0cellpadding =0cellspacing =0>
< thead>
< tr class =gradient_gray>
< th>标题< / th>
< th>状态< / th>
< th style =border-right：none;>进度< / th>
< th>操作< / th>
< / tr>
< / thead>
< tbody>
{{if items.length> 0}}
{{each items}}
< tr class ='item'recordid =$ {ows_ID}>
< td>< a class ='{{if ows_Critical_x0020_Project ==1}} critical {{if}}'href =$ {DisplayURL}> $ {ows_Title}< / A> < / TD>
< td class =status>
< a href =＃class =pstatus> $ {ows_ProjStatus}< / a>
< div style ='display：none;'>
{{if ows_ProjComments}}
< div style =padding-bottom：10px;> $ {ows_ProjComments}< / div>
{{/ if}}
< div style =font-weight：bold;>已编辑的版本$ {Editor}< / div>
< div style =font-style：italic;> $ {when}< / div>
< / div>
< / td>
< td>
< div class =ui-widget-default>
< div class =progressbarvalue =$ {ows_PercentComplete}style =height：100％;>< / div>
< / div>
< / td>
< td class =actions>
{{if ows_ProjStatus！=Completed}}< a href =＃class =vg_icon ticktitle =标记已完成>< / a> {{/ if}}
< a href =$ {EditURL}class =vg_icon penciltitle =Edit>< / a>
< a href =＃class =vg_icon commenttitle =评论>< / a>
< / td>
< / tr>
{{/ each}}
{{else}}
< tr>< td colspan =4>您没有任何项目< / td>< TR>
{{/ if}}
< / tbody>
< / table>
- >
< / div>
If I have a table
<table>
<thead>
<tr>Col1</tr>
<tr>Col2</tr>
<tr>Col3</tr>
</thead>
<tbody>
</tbody>
</table>
What is the fastest, most efficient way to fill the tbody with tr elements containing my data from a database using a Jquery Ajax. (unless you have a better way)
Return html code from the webservice OR dynamically create the html code in javascript?
Also I have to support the user "drilling down; ie. either clicking a > or double clicking the row to open a pane to show some more information. (including another table and some detail information returned by a separate webservice)
Thanks, all ideas welcome!
解决方案
I work on a large-scale enterprise portal that uses jQuery and AJAX. I've implemented jQuery Templates and the jQuery TableSorter plug-in to facilitate this. Here's some example code:
Javascript (Data Provider): Data.Lists.js
myorg.data.list.GetListItems ({
webURL: "http://our.awesome.portal.com/Lists",
listName: "Projects List",
caml: caml,
CAMLRowLimit: 6,
callback: function(data) {
var list = {};
//code here that formats some data before binding
list.items = data;
var templateHtml = $('.ptMyProjects').html()
.replace("<!--", "").replace("-->","");
var html = $.tmpl(templateHtml, list);
$('.ptMyProjects').html(html);
//make sortable table
$('.ptMyProjects .tablesorter').tablesorter({
sortList: [[0,0]],
headers: {3: {sorter: false}},
widgets: ['zebra']
});
//class last row
$('.ptMyProjects .tablesorter thead th').last().addClass('last');
//add hover effect
$('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
//add tooltips
$('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
}
});
HTML (the template)
<div class="ptMyProjects ptTemplate">
<!--
<table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr class="gradient_gray">
<th>Title</th>
<th>Status</th>
<th style="border-right: none;">Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{if items.length > 0}}
{{each items}}
<tr class='item' recordid="${ows_ID}">
<td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
<td class="status">
<a href="#" class="pstatus">${ows_ProjStatus}</a>
<div style='display: none;'>
{{if ows_ProjComments}}
<div style="padding-bottom: 10px;">${ows_ProjComments}</div>
{{/if}}
<div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
<div style="font-style: italic;">${when}</div>
</div>
</td>
<td>
<div class="ui-widget-default">
<div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
</div>
</td>
<td class="actions">
{{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
<a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
<a href="#" class="vg_icon comment" title="Comments"></a>
</td>
</tr>
{{/each}}
{{else}}
<tr><td colspan="4">You have no projects.</td></tr>
{{/if}}
</tbody>
</table>
-->
</div>
这篇关于jquery ajax填充html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
