HTML jQuery treeTable 自动刷新闪烁

Question

我正在尝试创建一个非常简单的 HTML 页面，我想在其中显示 json 文件中的一些数据。我正在使用 jQuery treeTable，它已全部启动运行。然而，JavaScript、html、css 和所有这些东西直到五天前我才知道，所以大部分都是在 Google 上进行研究并使用 w3school示例或暴力破解我的代码。

在开始为此花费大量时间之前，请注意它是运行我想要的，因此不需要做更多。

然而，有一点让我很烦恼，那就是每当我自动刷新以将（如果有的话）新数据传递到我的 table 时，它就会闪烁。我重建了整个 table 并使用 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 文件加载数据，通过将其全部添加到字符串来构建我的 table，然后将数据附加到我的 table。追加后，我使用 persist 加载 treeTable 功能。

我当然可以保留 treeTable 信息，只通过比较新的和当前的来更改需要更改的内容；然而，现在这是太多的工作，我会在以后有空的时候做这件事。

所以我想问有没有一种简单的方法可以改进我的代码，我是否错过了一些聪明的功能等。

Answer 1

我找到了解决问题的办法。现在我的 table 正在更新而不闪烁。我试图重做 display: none/table 东西并让它工作。我删除了 html 页面刷新并为 JavaScript 添加了一个间隔计时器，它将加载我的 getJsonData 函数。如果文件被修改，它只会刷新 table。

<!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>

脚本末尾的突出显示功能已被注释掉，因为它不会在更新之间保存其状态，并导致所选行在 table 更新时消失。

HTML jQuery treeTable 自动刷新闪烁

HTML jQuery treeTable auto refresh flickering

jquery

html

css

json

treetable