Ztree.js Asynchronous Loading Region example

Background implementation can refer to the article I previously published area three level linkage

Ztree API js Download Click to open the link

One effect Demo

<! DOCTYPE html>
Code in the actual application

<!--<link rel= "stylesheet" href= "Js/ztree/css/demo.css" type= "Text/css" >--><link rel= "stylesheet" href= "Js/ztree/css/ztreestyle/ztreestyle.css" type= "Text/css" ><!--<script type= "Text/javascript" src= "JS /ztree/js/jquery-1.4.4.min.js "></script>--><script type=" Text/javascript "src=" js/ztree/js/ Jquery.ztree.core-3.5.js "></script><script src=" Js/util/area.js "type=" Text/javascript "></ Script>


Area: <input id= "Citysel" type= "text" readonly value= "" style= "width:120px;" onclick= "ShowMenu (); return false; " /><input id= "Areacodev" type= "hidden" ><div id= "menucontent" class= "menucontent" style= "display:none; Position:absolute; Background:rgb (194, 237); Height:500px;overflow-y: auto; Overflow-x:hidden; ">      <a href=" Javascript:claclarea () "> Emptying </a>       <ul id=" Treedemo "class=" Ztree "style=" margin-top:0; width:160px; " ></ul>               </div>

var setting = {async: {enable:true,url: "/area/getareas.do", autoparam:["Id=code"],//autoparam:["id", "name=n", "level =lv "],//otherparam:{" Otherparam ":" Ztreeasynctest "},//datafilter:filter,type:" Get "},view: {dblclickexpand:false} , data: {simpledata: {enable:true}},callback: {Beforeclick:beforeclick,onclick:onclick}};var zNodes;function Beforeclick (Treeid, treeNode) {//var check = (treeNode &&!treenode.isparent);//if (!check) alert ("Only select City ..."); return true;} function OnClick (E, Treeid, TreeNode) {var ztree = $.fn.ztree.getztreeobj ("Treedemo"), nodes = Ztree.getselectednodes (), v = ""; var code= ""; Nodes.sort (function compare (A, b) {return a.id-b.id;}); For (var i=0, l=nodes.length; i<l; i++) {//v + = Nodes[i].name + ","; v = nodes[i].name;code=nodes[i].id;} if (v.length > 0) v = v.substring (0, v.length);//-1var cityobj = $ ("#citySel"); Cityobj.attr ("value", v); $ ("#areaCodeV" ). val (code);} Select function ShowMenu () {var cityobj = $ ("#citySel"), var Cityoffset = $ ("#citySel"). OffsET (); $ ("#menuContent"). CSS ({left:cityOffset.left + "px", Top:cityOffset.top + cityobj.outerheight () + "px"}). Slidedown ("Fast"); $ ("body"). Bind ("MouseDown", Onbodydown);} function Hidemenu () {$ ("#menuContent"). FadeOut ("Fast"); $ ("body"). Unbind ("MouseDown", Onbodydown);} function Onbodydown (event) {if (!) ( Event.target.id = = "Menubtn" | | Event.target.id = = "Menucontent" | | $ (event.target). Parents ("#menuContent"). length>0) {Hidemenu ();}} $ (document). Ready (function () {$.ajax ({url: "/area/getareas.do", type: "POST", DataType: "JSON", data: {code: "P"}, Success:function (returndata, status) {if (status = "Success") {//alert ("Returndata:" +returndata); Znodes = Returndata;//znodes=dataj;$.fn.ztree.init ($ ("#treeDemo"), setting, Znodes);}}); /alert (Json.stringify (znodes));//$.fn.ztree.init ($ ("#treeDemo"), setting, znodes);}); /Level Get menu, Seleidfunction getareas {var dataj;$.ajax ({url: "/area/getareas.do", type: "POST", DataType: "JSON", Data: {code:level},success:function (Returndata, Status) {if (status = "Success") {alert ("Returndata:" +returndata); var dataj = Returndata;znodes=dataj;}}); return Dataj;} Empty function Claclarea () {$ ("#citySel"). Val ("); $ (" #areaCodeV "). Val (");


Ztree.js Asynchronous Loading Region example