Extaspnet application tips (22)-ext4jslint JSON file creation tree control

Introduction

Ext4jslint is an open-source project that uses extaspnet to display the jslint-Toolkit check results.
Jslint-Toolkit is an open-source project that uses rhino and jslint. It can check all the Javascript in a folder and display friendly check results.

The following is the check result generated by jslint-Toolkit:

[{"Name": "Source", "type": "folder", "kids": [{"name": "config. JS "," type ":" file "," errors ": [0, 0, 0]}, {" name ":" lint. JS "," type ":" file "," errors ": [3, 0, 3] },{" name ":" Main. JS "," type ":" file "," errors ": [0, 0, 0]}, {" name ":" util. JS "," type ":" file "," errors ": [0, 0, 0]}]," basepath ":" scripts/source "," filecount ": 4, "errors": [3, 0, 3]}, {"name": "jquery-1.3.2.js", "type": "file", "basepath ": "scripts/jquery-1.3.2.js", "errors": [51, 43, 8]}]
 

Such a JSON string describes the following file structure:

 
+ Scripts/source-config. js-lint. js-Main. js-util. js-scripts/jquery-1.3.2.js
 

Note that the root node has an additional attribute basepath to indicate the root path.
Errors indicates the number of errors in this Javascript file (this is an array, the first indicates the total number, and the second indicates the number of serious errors ).

Page effect:

Aspx label Definition

 
<Ext: tree runat = "server" id = "tree1" showborder = "false" showheader = "false" autoscroll = "true" enablearrows = "true" onnodecommand = "tree1_nodecommand"> </EXT: tree>
 

Label definition is very simple, because all logic is implemented in the background.
At the same time, the event processing onnodecommand = "tree‑nodecommand" of the click Tree node is defined, because we need to update the grid in the middle when clicking the tree node, that is, the current JavaScript Error List.

Tree and Recursion

As long as there is a tree, there is no need for recursive functions, so this sectionCodeIt is also helpful for us to understand recursion.

First look at the page initialization code:

Protected void page_load (Object sender, eventargs e) {If (! Ispostback) {loaddata (true) ;}# region loaddata private void loaddata (bool showallerrors) {btnexpandall. onclientclick = tree1.getexpandallnodesreference (); btncollapseall. onclientclick = tree1.getcollapseallnodesreference (); string treestr = getfilecontent ("~ /Data/JSON/tree. JSON "); List <string> treepathlist = new list <string> (); resolvemenutree (New jsonarray (treestr), treepathlist, showallerrors, tree1.nodes );} private string getfilecontent (string path) {string treestr = string. empty; using (streamreader sr = new streamreader (server. mappath (PATH) {treestr = sr. readtoend ();} return treestr;} private void resolvemenutree (jsonarray Ja, list <string> treepathlist, bool showallerrors, extaspnet. treenodecollection nodes) {// todo recursive Spanning Tree} private string gettreepath (list <string> treepath) {string Path = string. empty; foreach (string node in treepath) {path + = node + "/";} return path. trimend ('/');}

We use the NII. JSON open-source class library (already included in extaspnet) to convert a JSON string to a jsonarray object so that we can use it in recursion:

 
Jsonarray ja = new jsonarray (treestr );
 

Recursive Spanning Tree

In order to let everyone see the nature of the problem, I first release a simple recursion to complete the basic functions:

Private void resolvemenutree2 (jsonarray Ja, list <string> treepathlist, bool showallerrors, extaspnet. treenodecollection nodes) {for (INT I = 0; I <Ja. count; I ++) {jsonobject KID = JA [I] As jsonobject; string name = kid. getstring ("name"); // The current path. If basepath exists, it indicates the root directory if (kid. has ("basepath") {treepathlist. add (kid. getstring ("basepath");} else {treepathlist. add (name) ;}string currentpath = gettreepath (treepathlist); string type = kid. getstring ("type"); // if there is no file in the folder, this folder is not added if (type = "folder" & kid. getint ("filecount") = 0) {treepathlist. removeat (treepathlist. count-1); continue;} extaspnet. treenode node = new extaspnet. treenode (); nodes. add (node); node. TEXT = Name; node. TEXT = string. format ("<span QTip = \" {0} \ ">{1} </span>", currentpath, node. text); If (type = "folder") {node. singleclickexpand = true; resolvemenutree2 (kid. getjsonarray ("kids"), treepathlist, showallerrors, node. nodes);} else {node. leaf = true;} treepathlist. removeat (treepathlist. count-1 );}}

In this Code, we use treepathlist to record the path of the current node, which is also a key point.

The generated page:

Complete code (set the node color according to the error, and send back the faulty node ):

Private void resolvemenutree (jsonarray Ja, list <string> treepathlist, bool showallerrors, extaspnet. treenodecollection nodes) {for (INT I = 0; I <Ja. count; I ++) {jsonobject KID = JA [I] As jsonobject; string name = kid. getstring ("name"); // The current path. If basepath exists, it indicates the root directory if (kid. has ("basepath") {treepathlist. add (kid. getstring ("basepath");} else {treepathlist. add (name);} string currentpath = gettre Epath (treepathlist); // get the jslint error count jsonarray errors = kid. getjsonarray ("errors"); int errorcount = errors. getint (0); int criticalerrorcount = errors. getint (1); If (showallerrors) {If (errorcount> 0) {name + = string. format ("({0})", errorcount) ;}} else {If (criticalerrorcount> 0) {name + = string. format ("({0})", criticalerrorcount) ;}} string type = kid. getstring ("type"); // if there is no file in the folder, no Add this folder if (type = "folder" & kid. getint ("filecount") = 0) {treepathlist. removeat (treepathlist. count-1); continue;} extaspnet. treenode node = new extaspnet. treenode (); nodes. add (node); node. TEXT = Name; // node. tooltip = currentpath; // The display color of the node string style = ""; if (showallerrors) {If (errorcount = 0) {style = "color: green ;";} else {If (criticalerrorcount = 0) {style = "color: # ff9900; ";}Else {style =" color: # ff0000; ";}}} else {If (criticalerrorcount! = 0) {style = "color: # ff0000;" ;}else {style = "color: green;" ;}} node. TEXT = string. format ("<span QTip = \" {2} \ "style = \" {0} \ "> {1} </span>", style, node. text, currentpath); If (type = "folder") {node. singleclickexpand = true; resolvemenutree (kid. getjsonarray ("kids"), treepathlist, showallerrors, node. nodes);} else {node. leaf = true; If (showallerrors) {If (errorcount! = 0) {node. enablepostback = true; node. commandname = currentpath ;}} else {If (criticalerrorcount! = 0) {node. enablepostback = true; node. commandname = currentpath ;}} treepathlist. removeat (treepathlist. Count-1 );}}

The next chapter describes how to update the Grid Control in the middle when you click the left-side tree node and load the IFRAME (Javascript file content) on the right ).

Download all source code