我试图创建一个非常简单的HTML页面，我想在json文件中显示一些数据。我正在使用jQuery treeTable，它已全部启动并运行。然而，JavaScript，html，css和所有这些东西在我五天前都不为人知，所以大部分内容都发现在谷歌上进行研究并使用w3school示例或强制我的代码。
在开始使用大量时间之前请注意它正在按我的意愿运行，因此不需要做更多的事情。
然而，有一点让我烦恼，而且当我自动刷新以便将新数据传递到我的表格中时，它会闪烁。我重建了整个表并使用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文件加载数据，通过将其全部添加到字符串来构建我的表，然后将数据添加到我的表中。附加后，我使用persist加载treeTable功能。
我当然可以保留treeTable信息，只需通过比较new与current来改变需要改变的内容;但是现在这项工作太多了，而且在我以后有空的时候会做的事情。
所以我问是否有一种简单的方法可以改进我的代码，我是否错过了一些聪明的功能等等。
答案 0 :(得分：0)
我找到了解决问题的方法。现在我的表正在更新而不会闪烁。 我试图重做显示：none / table thing并让它正常工作。我删除了html页面刷新并为JavaScript添加了一个间隔计时器，它将加载我的getJsonData函数。如果文件被修改，它将只刷新表。
<!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>
</head>
<body onload="getJsonData()">
<div class="show"></div>
<div class="hide"></div>
</body>
<script type="text/javascript">
<!-- // In case of no script support hide the javascript code from the browser
setInterval(function () {getJsonData()}, 5000);
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="file:///' + 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 table = document.createElement("table")
table.setAttribute("class", "hide");
$(table).appendTo("div.hide");
$(document.createElement("caption")).appendTo("table.hide");
$("table.hide caption").append('Test Suite test report')
$(document.createElement("thead")).appendTo("table.hide");
var header = ''
header += '<tr>'
header += '<th>status</th>'
header += '<th>Test tree</th>'
header += '<th>Type</th>'
header += '<th>comments</th>'
header += '</tr>'
$("table.hide thead").append(header)
$(document.createElement("tbody")).appendTo("table.hide");
$("table.hide tbody").append(addNode(jsonData))
}
/* Ajax methode, more controle */
function getJsonData() {
$.ajax({
url: 'testSuite.json',
dataType: 'json',
type: 'get',
cache: false,
ifModified: true,
success: function(data, status) {
if (status == 'success') {
$.each( data, function( key, value ) {
var treeData = buildTree(data)
$(".hide, .show").toggleClass("hide show");
$('table.hide').treetable('destroy');
$('div.hide').empty();
$("table.show").agikiTreeTable({expandable: true, column: 1, persist: true, persistStoreName: "treeTableData"});
});
}
},
error: function(xhr){
$("div.show").empty();
$("div.show").append(xhr.responseText);
}
});
}
// Highlight selected row
//$("div.show, div.hide").on("mousedown", "tr", function() {
// $(".selected").not(this).removeClass("selected");
// $(this).toggleClass("selected");
//});
-->
</script>
<noscript>
<h3>Requires JavaScript</h3>
</noscript>
</html>
脚本末尾的突出显示功能已被注释掉，因为它没有在更新之间保存其状态，并导致所选行在更新表时消失。