我正在尝试创建一个非常简单的 HTML 页面，我想在其中显示 json 文件中的一些数据。我正在使用 jQuery treeTable，它已经全部启动并正在运行。然而，JavaScript、html、css 和所有这些东西直到五天前对我来说还很陌生，所以大部分都是在 Google 上进行研究并使用 w3school 示例或暴力破解我的代码。
在开始使用大量时间之前，请注意它正在按我的意愿运行，因此不需要做更多。
然而，有一点让我烦恼，那就是当我自动刷新以将（如果有的话）新数据传递到我的表中时，它会闪烁。我重建了整个表并使用 persist 重新加载其当前状态。
我尝试使用使用样式显示在背景中绘制它的方法：none/inline然后翻转它，但不知何故这并没有做任何事情来消除闪烁。
我的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 文件加载数据，通过将其全部添加到字符串来构建我的表，然后将数据附加到我的表中。附加后，我使用持久加载 treeTable 功能。
我当然可以保留 treeTable 信息，只通过比较新的和当前的来更改需要更改的内容；但是，现在这工作量太大，以后有时间时我会做的。
所以我问是否有一种简单的方法可以改进我的代码，我是否错过了一些聪明的功能等等。