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信息，只通过比较新的和当前的内容来改变需要改变的东西;然而，现在这个工作太多了，而且当我有空的时候我会这样做。
所以我问的是有一个简单的方法，我可以提高我的代码，我错过了一些巧妙的功能，等等。