0
我想創建一個非常簡單的HTML頁面，我想從json文件中顯示一些數據。我正在使用jQuery treeTable，它正在運行。然而，直到五天前，JavaScript，html，css以及所有這些東西對我來說都是未知的，所以大部分都是在Google上進行研究並使用w3school示例或暴力破解我的代碼。HTML jQuery treeTable自動刷新閃爍
在開始使用大量的時間之前，請注意它正在運行，因此我不需要做更多的事情。
然而，有一點讓我感到嘮叨，那就是當我自動刷新以傳遞（如果有的話）新數據到我的表中時，它閃爍。我重建了整個表並使用persist來重新加載其當前狀態。
我試圖使用在背景中使用風格顯示：無/內嵌繪製它的方法，然後翻轉它，但不知何故，這並沒有做任何事情來消除閃爍。
我的HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<!-- 2 load the theme CSS file -->
<script src="jquery/jquery-1.11.2.min.js"></script>
<link href="jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<link href="jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet" />
<script src="jquery-treetable/jquery.treetable.js"></script>
<script src="jquery-treetable/persist-min.js" type="text/javascript"></script>
<script src="jquery-treetable/jquery.treetable-ajax-persist.js" type="text/javascript"></script>
<meta http-equiv="refresh" content="5">
</head>
<body>
<script type="text/javascript">
<!-- // In case of no script support hide the javascript code from the browser
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
function addNode(jsonData) {
// Array handling here, no data need to be added
var treeData = ''
//console.log(jsonData)
if (isArray(jsonData)) {
if (jsonData.length > 0) {
$.each(jsonData, function(k, v) {
//console.log('key :' + k + ', value :' + v + ', length :' + v.length)
treeData += addNode(v)
});
}
}
// Object handling here might contain data which needs to be presented
else {
if (jsonData.parentNodeId == "None") {
treeData += '<tr data-tt-id="' + jsonData.nodeId + '">'
} else {
treeData += '<tr data-tt-id="' + jsonData.nodeId + '" data-tt-parent-id="' + jsonData.parentNodeId + '">'
}
switch(jsonData.nodeType) {
case "fileLink":
treeData += '<td></td>'
treeData += '<td><span style="font-weight:bold"> log file: <a href="' + jsonData.data.comments + '">' + jsonData.text + '</a></span></td>'
treeData += '<td></td>'
treeData += '<td></td>'
break
default:
if (parseInt(jsonData.data.status) > 25) {
treeData += '<td width="20px" align="center" class="status_'+ parseInt(jsonData.data.status) + '"></td>'
} else {
treeData += '<td width="20px" align="center" class="status_default"></td>'
}
if (jsonData.children.length > 0) {
treeData += '<td>' + jsonData.text + '(' + jsonData.children.length + ')</td>'
} else {
treeData += '<td>' + jsonData.text + '</td>'
}
treeData += '<td>' + jsonData.data.type +'</td>'
treeData += '<td>' + jsonData.data.comments +'</td>'
treeData += '</tr>'
if (jsonData.nodeType == 'tst') {
treeData += addNode(jsonData.data.logFileNode)
}
treeData += addNode(jsonData.children)
} // End switch(jsonData.nodeType)
}
return treeData
}
function buildTree(jsonData) {
var baseTable = ''
baseTable += '<caption>Test Suite test report</caption>'
baseTable += '<thead>'
baseTable += '<tr>'
baseTable += '<th>status</th>'
baseTable += '<th>Test tree</th>'
baseTable += '<th>Type</th>'
baseTable += '<th>comments</th>'
baseTable += '</tr>'
baseTable += '</thead>'
baseTable += '<tbody>'
baseTable += addNode(jsonData)
baseTable += '</tbody>'
return baseTable
}
/* Ajax methode, more controle */
$.ajax({
url: 'testSuite.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
$.each(data, function(key, value) {
var treeData = buildTree(data)
$("#reportDataTree").append(treeData)
$("#reportDataTree").agikiTreeTable({expandable: true, column: 1, persist: true, persistStoreName: "treeTableData"});
});
}
});
// Highlight selected row
$("#reportDataTree tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
-->
</script>
<table id="reportDataTree">
</table>
<noscript>
<h3>Requires JavaScript</h3>
</noscript>
</body>
</html>
我的代碼是非常簡單的，我認爲：我從JSON文件加載數據，通過其所有添加到一個字符串，然後建立我的表.append數據發送到我的表格。在追加後，我用持久加載treeTable功能。
我當然可以保留treeTable信息，只通過比較新的和當前的內容來改變需要改變的東西;然而，現在這個工作太多了，而且當我有空的時候我會這樣做。
所以我問的是有一個簡單的方法，我可以提高我的代碼，我錯過了一些巧妙的功能，等等。