C # Use Jquery zTree to implement tree structure display _ asynchronous data loading,

C # Use Jquery zTree to implement tree structure display _ asynchronous data loading,

JQuery-Ztree: https://github.com/zTree/zTree_v3

JQuery-Ztree structure demo page: http://www.treejs.cn/v3/demo.php#_101

For more information about zTree, see the Demo page and the zTree help Demo.

 

The following is a brief description of one of the instances I use (the key code is directly used ):

Asynchronously load node data:

A-front-end:

<Link href = "zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel = "stylesheet"/> <script src = "zTree_v3-master/js/jquery. ztree. core. js "type =" text/javascript "> </script> <script language =" JavaScript "type =" text/javascript "> var setting = {async: {enable: true, url :".. /Handler/ShoppingHandler. ashx ", // The request's general handler autoParam: [" id "], // comes with the parameter id -- From the node id otherParam: {" type ":" GetUserLevelList "}, // other parameter Customization DataFilter: filter, // data filter type: "post" // Request Method }}; function filter (treeId, parentNode, childNodes) {if (! ChildNodes) return null; for (var I = 0, l = childNodes. length; I <l; I ++) {childNodes [I]. name = childNodes [I]. name. replace (/\. n/g ,'. ');} return childNodes;} $ (document ). ready (function () {$. fn. zTree. init ($ ("# treeDemo"), setting); // render tree structure }); </script> <div class = "zTreeDemoBackground left"> <ul id = "treeDemo" class = "ztree"> </ul> </div>

View Code

Background B:

Using MobileBusiness. common. data; using MobileBusiness. library. passport; using MobileBusiness. shopping. data; using MobileBusiness. shopping. data. common; using MobileBusiness. shopping. data. entity; using MobileBusiness. web. library. script; using Newtonsoft. json; using System. collections. generic; using System. linq; using System. web; using ShoppingData = MobileBusiness. shopping. data. entity; namespace M ObileBusiness. shopping. businessManage. handler {/// <summary> /// summary of Shopping /// </summary> public class ShoppingHandler: IHttpHandler {// WeChatUser weChatUser = WeChatIdentity. currentUser; public void ProcessRequest (HttpContext context) {string result = ""; if (context. request ["type"]! = Null) {string requestType = context. request ["type"]; try {switch (requestType) {// obtain the user information level List case "GetUserLevelList": result = this. getUserLevelList (context); break; default: break ;}} catch (Exception ex) {result = ex. message;} context. response. contentType = "text/html"; context. response. write (result); context. response. end ();} private string GetUserLevelList (HttpContext context) {strin G parentUserPhone = context. request ["id"]; return GetUserCollByPhone (parentUserPhone);} private string GetUserCollByPhone (string phone) {// encoding, parent encoding, name, whether to open, open image, close image // {id: 1, pId: 0, name: "show, hide custom icon different", open: true, iconOpen :".. /.. /.. /css/zTreeStyle/img/diy/javasopen.png ", iconClose :".. /.. /.. /css/zTreeStyle/img/diy/eclipclose.png "}, // encoding, parent encoding, name, whether to open, display image // {id: 11, pId: 1, name: "leaf node 1", icon :".. /.. /.. /Css/zTreeStyle/img/diy/2.png"}, List <object> result = new List <object> (); ShoppingData. userInfoCollection userColl = ShoppingData. userInfoAdapter. instance. loadByParentUserPhone (phone); userColl. forEach (user => {result. add (new {id = user. phone, pid = phone, name = user. userName, isParent = ShoppingData. userInfoAdapter. instance. loadByParentUserPhone (user. phone ). count> 0? True: false}) ;}); return JsonConvert. SerializeObject (result) ;}public bool IsReusable {get {return false ;}}}}

View Code