在下面的代码中,表行上有一个click事件。单击一行时,它使用第一列中的id值并进行休息调用,并使用我公司使用的第三方函数(myDataGrid)构建一个新表(我必须使用它)。至于它在这里工作得很好。没问题。
但是当我点击一行时,它会加载第二个表格。当我点击另一行时,它不会重新加载。它只清除表格元素,因为这一行:
$('#Table_1_wrapper').html("");
但它不会再创建表格。如何让“myDataGrid”函数动态加载数据?
$scope.tableClick = function(event) {
var tr = $('#Table_0_wrapper').find('tr');
var id = $(event.target).parent().find("td:first").text();
makeProxyCall("http://localhost:9090/service/getRowsWithId/"+id, function(data) {
var dataArray = new Array([]);
for(i=0;i<data.length;i++) {
dataArray[i] = [data[i].id, data[i].otherId, data[i].ip, data[i].serialNumber, data[i].name, data[i].otherName];
}
$('#Table_1_wrapper').html("");
$('table[data-table-name="dt-newRows"]').myDataGrid({
'aoColumns': [
{ 'sTitle': 'ID', 'sClass': 'essential' },
{ 'sTitle': 'Other ID', 'sClass': 'essential' },
{ 'sTitle': 'IP', 'sClass': 'essential' },
{ 'sTitle': 'Serial Number', 'sClass': 'essential' },
{ 'sTitle': 'Name', 'sClass': 'essential' },
{ 'sTitle': 'Other Name', 'sClass': 'essential' }
],
'aaData': dataArray,
'isResponsive': true
});
});
}
makeProxyCall功能:
window.makeProxyCall = function(url, handle) {
return $.ajax({
type : 'GET',
url : "/api/v2/proxy",
dataType : "json",
headers : {
"Service-End-Point" : url
},
contentType : "application/json",
success : function(data) {
handle(data);
},
error : function(error) {
}
);
};
HTML:
<table ng-click="firstTableClick($event)" cellpadding="0" cellspacing="0" border="0" class="table table-bordered" data-table-name="dt-oldrows"></table>
<table ng-click="tableClick($event)" cellpadding="0" cellspacing="0" border="0" class="table table-bordered" data-table-name="dt-newrows"></table>
注意:当我在单击不同行时进行调试时,makeProxyCall()始终获取真值。
答案 0 :(得分:1)
大多数jquery表插件都有内置的重载方法。因为大多数这些网格不仅使用页面上的html标记,所以它们还使用一些变量和值来存储表的当前状态。
如果“myDataGrid”网格没有这样的重载方法,请查找专用的destroy方法。这通常会卸载所有保留的网格资源。
在不知道插件的情况下,我无法给你进一步的建议。