问题描述
如果我有一张桌子
< 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的大规模企业门户。我实现了和来实现这一点。以下是一些示例代码: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表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!