如何在json2html中使用onclick

Question

我正在使用 JSON2HTML 库来生成 HTML。我遇到了 onclick 的问题。以下是代码的 sn-p

**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)