Jquery/css3/HTML5 front-end [2] jquery Treeview

Jquery Treeview is a lightweight and flexible conversion of unordered lists into a scalable and foldable tree that supports location and cookie-based persistence.

1. Custom htmlhelper dynamically generates unlimited nodes

 1       ///   <Summary>  2       ///  Custom htmlhelper  3       ///   </Summary>  4       Public   Static   Class  Htmlhelpers  5  {  6           Private   Static Stringbuilder sb = New  Stringbuilder ();  7           Private   Static Blldirectorymanager = New  Blldirectorymanager ();  8   9           ///   <Summary> 10           ///  Get directory  11           ///   </Summary>  12           ///   <Param name = "html"> </param>  13           ///   <Returns> </returns>  14           Public   Static   String Gettreeview (This  Htmlhelper HTML)  15   {  16   SB. Clear ();  17 SB. appendline ( "  <Ul id = 'treeview'>  "  );  18               //  Root directory  19 SB. append ( " <Li> <a id = '2017-0000-0000-000000000000 'href = 'javascript: selecttreeview (\ "00000000-0000-0000-0000-000000000000 \")'> root directory </a>  "  );  20               //  Retrieve the list of subdirectories with the parent directory being empty  21 List <directory> List = Blldirectorymanager. getlistsbyparentid (guid. Empty );  22               //  Recursive directory  23 Treeview (list. Where (r => r. parentid =Null  ). Tolist ());  24 SB. append ( "  </LI>  "  );  25 SB. appendline ( "  </Ul>  "  );  26               Return  SB. tostring ();  27  }  28   29           ///   <Summary>  30           ///  Recursive directory  31           ///   </Summary>  32           ///   <Param name = "list"> </param>  33           Private   Static  Void Treeview (list <directory> List)  34   {  35               If (List. Count> 0 & List! = Null  )  36   {  37 SB. appendline ( "  <Ul>  " );  38                   Foreach ( VaR Item In  List)  39   {  40                       String STR = ""  ;  41 STR = String . Format ( " <Li> <a id = \ "{0} \" href = 'javascript: selecttreeview (\"  " + Item. directoryid + "  \ ") '>  " + Item. directoryname, item. directoryid );  42 SB. append (STR + "  </A>  "  );  43   44                       // Retrieve the subdirectory list  45 List <directory> sublist = Blldirectorymanager. getlistsbyparentid (item. directoryid );  46   47                       If (Sublist. Count> 0 & Sublist! = Null  )  48   {  49 Treeview (sublist. Where (r => r. parentid =Item. directoryid). tolist ());  50   }  51 SB. append ( "  </LI>  "  );  52   }  53 SB. appendline ( "  </Ul>  "  ); 54   }  55   }  56 }

2. Add a namespace in the configuration file web. config <add namespace = "system. Web. MVC. html"/>
3. Add the jquery library and display the HTML directory on the page. Other pages are called through @ {html. renderaction ("Treeview", "controllername ");}

  1  ///      2   //   get the directory   3  ///      4  ///   
    
     5   Public   actionresult Treeview ()   6  {  7   return   View ();   8 }

1 <LINK rel = "  Stylesheet  " Href = "  @ URL. Content (  " ~ /Jquery. Treeview/jquery.treeview.css "  )  " /> 2 <LINK rel = "  Stylesheet  " Href = " @ URL. Content (  " ~ /Jquery. Treeview/screen.css "  )  " /> 3 <Div id = "  Tree  " > 4   @{  5   @ Html. Raw (html. gettreeview ());  6   } 7 </Div> 8 <SCRIPT src = "  @ URL. Content (  " ~ /Jquery. Treeview/jquery. Treeview. js "  )  " Type = "  Text/JavaScript  " > </SCRIPT> 9 <SCRIPT src = "  @ URL. Content ( " ~ /Jquery. Treeview/lib/jquery. Cookie. js "  )  " Type = "  Text/JavaScript  " > </SCRIPT> 10 <SCRIPT src = "  @ URL. Content (  " ~ /Jquery. Treeview/demo. js "  )  " Type ="  Text/JavaScript  " > </SCRIPT>

4. Demo. js contains four example. Different htmlhelper <ul id = 'treeview'> can call different example

 
1<SCRIPT type ="Text/JavaScript">2 $ (Document). Ready (function (){3$ ("# Treeview"). Treeview ();4 })5</SCRIPT>
 

5. Select node styles and events

1       //  Selected directory events  2       VaR Pretree = ""  ;  3   Function selecttree (ID ){  4           If (Pretree! = ""  ){  5 $ ( "  # " + Pretree). removeclass ( "  Selecttree  "  );  6   }  7 Pretree = ID;  8 $ ( "  #  " + Id). addclass ( "  Selecttree  " );  9           //  Findpage (1, array, 0, ID );  10 }

6. Refresh the directory. At the same time, add the selected $ ("#" + id). addclass ("selecttree") based on the specific transfer ID. Style

  1   [httppost]   2   Public   actionresult Treeview (formcollection formvalues)   3  {  4   return  redirecttoaction ("   Treeview  " ,  "  controllername  "   );   5 }

1//Refresh2 Function refreshtree (){3$. Post ("/Controllername/Treeview/", Function (data ){4$ ("# Tree"Pai.html (data );5 });6}
 

7. Related Resources: jquery Treeview what is jstree?