Fatal编程技术网
  • jquery/
  • HTML jQuery树表自动刷新闪烁

HTML jQuery树表自动刷新闪烁

jquery html css json

HTML jQuery树表自动刷新闪烁,jquery,html,css,json,treetable,Jquery,Html,Css,Json,Treetable,我试图创建一个非常简单的HTML页面，在这里我想显示json文件中的一些数据。我正在使用jQueryTreeTable，它已经启动并运行了。然而，直到五天前，JavaScript、html、css和所有这些东西对我来说还是相当陌生的，所以大部分内容都是在谷歌上进行研究，并使用w3school示例或暴力强迫我编写代码 在开始使用大量时间之前，请注意，它正在按照我的意愿运行，因此不需要做更多的工作 然而，有一点让我感到困扰，那就是每当我自动刷新以将新数据传递到表中（如果有）时，它都会闪烁。我重建了整

我试图创建一个非常简单的HTML页面，在这里我想显示json文件中的一些数据。我正在使用jQueryTreeTable，它已经启动并运行了。然而，直到五天前，JavaScript、html、css和所有这些东西对我来说还是相当陌生的，所以大部分内容都是在谷歌上进行研究，并使用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>


需要JavaScript
我的代码非常简单，我认为：我从json文件加载数据，通过将所有数据添加到字符串来构建表，然后将数据追加到表中。附加之后，我用persist加载treeTable特性

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

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

我找到了解决问题的方法。现在我的表正在更新，不会闪烁。 我试着重做显示器：没有/桌上的东西，并让它工作。我删除了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>


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