如何在json2html中使用onclick

Question

我正在使用 JSON2HTML 庫來生成 HTML。 我遇到了 onclick 問題。以下是代碼片段

 **JavaScript** var data =[ { "testSuite":[ { "testCase":[ { "testCaseName":"Login Succesfull TC (nested error)", "testCaseResult":"false", "testCaseScreenShot":"image", "testCaseTimeStamp":"0:00:13.258", "testStep":[ { "testStepresult":"true", "testStepName":"ub_cti_inputText - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", }, { "testStepresult":"true", "testStepName":"ub_cti_inputText1111111111 - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", }, { "testStepresult":"false", "testStepName":"ub_cti_inputText - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", } ] //End of TestStep }, ], // End of testSuite1 "testSuiteName":"LoginAndTicketStatus_suite - TS (nested error)", "testSuiteResult":"false", "testSuiteTimeStamp":"0:00:15.238" }, ] //End of TestSuite JSON }, ]; //End of data var transform = { "testSuite": { "tag": "ul", "children": function () { return (json2html.transform(this.testSuite, transform.getTestSuiteName)); } }, "getTestSuiteName": { "tag": "li", "nowrap":"true", "class":"closed", "children":[ {"tag":"a","href":"#testSuiteLink", "onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big", "children":[ //Apply font color for result of testSuite {"tag":"font", "color":function() { if(data[0].testSuite[0].testSuiteResult=="true") { return "Green"; } else { return "red"; } }, "html": "${testSuiteName}", }, ] }] }, {"tag":"ul","children":function() { return ( json2html.transform(this.testCase, transform.testCase)); } }] }, "testCase": { "tag": "li", "nowrap":"true", "class":"closed", "children":[ { "tag":"a","href":"#testcase","onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testCaseResult=="true") { return "Green"; } else { return "red"; } },"html":function() { return this.testCaseName; }} ]} ]}, {"tag":"ul","children":function() { return ( json2html.transform(this.testStep, transform.testStep) ); } }] }, "testStep": { "tag": "li", "nowrap":"true", "class":"closed", "onclick":function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"a","href":"#testcase","onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testStepresult=="true") { return "green"; } else { return "red"; } },"html":function() { for(element in this) { console.log("Element received "+element+" -----44"); return this.testStepName ; } } } ]} ]} , {"tag":"ul","children":[ { "tag":"li","nowrap":"true","class":"closed","children":[ { "tag":"a","href":"#step","onclick":function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); },"children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testStepresult=="true") { return "Green"; } else { return "red"; } },"html":function() { return this.testStepresult ; } } ]} ]} ]} ]} ]}, }; //End of HTML template definition(transform) $(document).ready(function() { $('#json').json2html(data, transform.testSuite); });

 **Css Styling** body { font-family: monospace; } ul.report, ul.report ul, ul.report li { margin: 0; padding: 0; } ul.report ul { padding-left: 1em; } ul.report li a { text-decoration: none; } a { text-decoration: none; } li::before { content: "⊞" } ul.report li { list-style: none; } { list-style-type: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://json2html.com/js/jquery.json2html.js"></script> <script src="http://json2html.com/js/json2html.js"></script> **HTML** <div id="json" style="width:95%;margin:5%"></div>

預期輸出：

單擊 LoginAndTicketStatus_suite - TS（嵌套錯誤）切換登錄成功 TC（嵌套錯誤）

單擊登錄成功 TC（嵌套錯誤）切換 ub_cti_inputText - TC（嵌套錯誤）、ub_cti_inputText1- TC（嵌套錯誤）、ub_cti_inputText - TC（嵌套錯誤）。

任何幫助是極大的贊賞！

Answer 1

首先，您可能想嘗試將您的 JSON 轉換組織成更易讀的格式。

現在回答您的問題，因為您將核心 json2html.transform 嵌套在您的轉換中，您需要確保它知道處理事件。 您可以通過在像這樣的選項中指定 {events:true} 來做到這一點

return (json2html.transform(this.testSuite, transform.getTestSuiteName,{'events':true}));

這告訴核心庫處理 jquery 事件。 否則你可以像這樣在一個虛擬的 div 元素上調用 jquery 插件

return ($('div').json2html(this.testSuite, transform.getTestSuiteName));

這是將正確調用這些事件的更新代碼（使用兩種不同的方法）

var transform = {
    "testSuite": {
        "tag": "ul",
        "children": function () {
        return ($('div').json2html(this.testSuite, transform.getTestSuiteName));
        }
    },
        "getTestSuiteName": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",
      "children":[
          {"tag":"a","href":"#testSuiteLink",
                     "onclick":
        function()
        {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"big",
            "children":[
            //Apply font color for result of testSuite
                {"tag":"font",                  
                "color":function()
                {
    if(data[0].testSuite[0].testSuiteResult=="true")
        {
        return "Green";
        }
        else
        {
        return "red";
        }                   
        },
        "html": "${testSuiteName}",
        },
        ]
        }]
        },
    {"tag":"ul","children":function()
         {
        return ( json2html.transform(this.testCase, transform.testCase,{'events':true}));
        }
        }]          
        },

    "testCase": {
       "tag": "li",
       "nowrap":"true",
       "class":"closed",         
        "children":[
        {
        "tag":"a","href":"#testcase","onclick": function()
        {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },
        "children":[
           {"tag":"big","children":[
           {"tag":"font","color":function()
         {                  
         if(this.testCaseResult=="true")
          {
            return "Green";
         }
            else
            {
            return "red";
            }                   
        },"html":function()
            {
            return this.testCaseName;
            }}
           ]}
         ]},
        {"tag":"ul","children":function()
         {
    return (  json2html.transform(this.testStep, transform.testStep,{'events':true}) );
        }
      }]
    },

    "testStep": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",

        "onclick":function() {
            console.log('here');
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"a","href":"#testcase","onclick": function()
            {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
            },
            "children":[
                {"tag":"big","children":[
                {"tag":"font","color":function()
                {               
                if(this.testStepresult=="true")
                {
                return "green";
                }
                else
                {
                    return "red";
                }

                },"html":function()
                {
                for(element in this) {
            console.log("Element received "+element+" -----44");
            return this.testStepName ;
            }
           }
         }
       ]}
     ]}                               ,
    {"tag":"ul","children":[                                    
    {
     "tag":"li","nowrap":"true","class":"closed","children":[
    {
      "tag":"a","href":"#step","onclick":function()
    {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },"children":[
        {"tag":"big","children":[
        {"tag":"font","color":function()
        {                   
          if(this.testStepresult=="true")
            {
               return "Green";
            }
        else
        {                       
            return "red";
        }
        },"html":function()
        {
              return this.testStepresult  ;
        }
            }
           ]}
          ]}
         ]}
        ]}
      ]},       
  }; //End of HTML template definition(transform)