Ztree example of dynamically loading database background data

The load data for synchronization is this:

<script type= "Text/javascript" >
function Showiconfortree (Treeid, TreeNode) {
return!treenode.isparent;
};
function Ztreeonclick (event, Treeid, TreeNode) {
alert (TREENODE.CID);
}
var setting = {
Callback: {
Onclick:ztreeonclick
},
View: {
Showicon:showiconfortree
},
Data: {
Key: {
Children: "Children",
Name: "CName",
Title: "",
URL: "url"
},
Simpledata: {
Enable:true
}
}
};
$ (document). Ready (function () {
$.ajax ({
Type: "Post",
ContentType: "Application/json",
URL: "Index.aspx/findall",
Data: "{}",
DataType: "JSON",
Success:function (Result) {
var znodes = RESULT.D; Accept the list from the webservice.
$.fn.ztree.init ($ ("#treeDemo"), setting, znodes);
}
});
});
</script>
The code that is loaded asynchronously is as follows:

1. HTML code:

Reference JS:

<link rel= "stylesheet" href= <c:url value= '/scripts/ztree-3.5/css/ztreestyle/ztreestyle.css '/> ' type= ' Text/css ">
<link rel= "stylesheet" href= "Scripts/ztree-3.5/css/ztreestyle/ztreestyle.css" type= "Text/css" >
<script type= "Text/javascript" src= "<c:url value= '/scripts/ztree-3.5/js/jquery.ztree.core-3.5.js '/>" > </script>
<script type= "Text/javascript" src= "Scripts/ztree-3.5/js/jquery.ztree.all-3.5.js" ></script>

<input type = "hidden" name = "YJDM" id = "YJDM" value= "${bzbsm.yjdm}"/>
<form:input id = "YJ" path= "YJ" CssClass = "required" ReadOnly = "true" style= "width:310px;" />
<a id= "menubtn" href= "onclick=" ShowMenu (); return false; > Selection </a>

<div id= "menucontent" style= "display:none; Position:absolute; width:310px; " >
<ul id= "Treedemo" class= "Ztree" style= "margin-top:0"; width:310px;height:150px; " ></ul>
</div>
2, JS code:

<style>
/**ztree **/
#menuContent Ul.ztree {
border:1px solid #617775;
Background: #f0f6e4;
width:170px;
height:160px;
OVERFLOW-Y: scroll;
Overflow-x: auto;
}
#menuContent Select {
width:154px;
border:1px solid #82AEE5;
margin-bottom:10px;
}
</style>
<script type= "Text/javascript" >
<!--
var setting = {

Check: {
Enable:true,
Chkboxtype: {"Y": "", "N": ""}
},
View: {
Checkable:true,
Dblclickexpand:false
},
Async: {//Dynamic loading
Enable:true,
URL: "/xh/dmbzyjwhb/treeload/dmyj",//Load Ztree &nbsp;&nbsp;
autoparam:["id", "pId", "name",
Datafilter:filter
},

Data: {//Must be added
Simpledata: {
Enable:true
}
},
Callback: {
beforeclick:beforeclick,//(before clicking) is used to capture the event callback function prior to checking or canceling the selection, and to determine whether the check or uncheck is allowed based on the return value
Onclick:onclick
Oncheck:oncheck
}
};
&nbsp;var znodes = ....//static
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;
}
function Beforeclick (Treeid, TreeNode) {
var check = (TreeNode &&!treenode.isparent);//is a node and is not a parent
if (!check) alert ("Only select context");
return check;
}
function OnClick (E, Treeid, TreeNode) {//
var ztree = $.fn.ztree.getztreeobj ("Treedemo"),
nodes = Ztree.getselectednodes (),//Get Ztree the currently selected node data collection (press CTRL + Select)
v = "";
Va= "";
Nodes.sort (function compare (a,b) {return a.id-b.id;}); /sorted by ID from small to large
For (Var i=0, l=nodes.length i<l; i++) {
if (i==0) {
V + + nodes[i].name;
VA + nodes[i].id;
}else{
V + + "," +nodes[i].name;
VA + + "," +nodes[i].id;
}
}
if (V.length > 0)
v = v.substring (0, v.length-1);
var cityobj = $ ("#yjDm");
Cityobj.attr ("value", VA);//Set the Val value of the text box
$ (' #yj '). attr ("value", V); To set the text value of the textbox
}
function Oncheck (E, Treeid, TreeNode) {
var ztree = $.fn.ztree.getztreeobj ("Treedemo"),
nodes = Ztree.getcheckednodes (True),
v = "";
Va= "";
For (Var i=0, l=nodes.length i<l; i++) {
V + + nodes[i].name + ",";
if (i==0) {
V + + nodes[i].name;
VA + nodes[i].id;
}else{
V + + "," +nodes[i].name;
VA + + "," +nodes[i].id;
}
}
if (v.length > 0) v = v.substring (0, v.length-1);
var cityobj = $ ("#yjDm");
Cityobj.attr ("value", VA);
$ (' #yj '). attr ("value", V);
}

function ShowMenu () {
var cityobj = $ ("#yj");//Input box
var Cityoffset = $ ("#yj"). offset ();//Get the relative offset of the matching element at the current viewport
The relative offset of the cityoffset.left element at the current viewport
Slidedown dynamically displays all matching elements by changing height (increasing downward), optionally triggering a callback function after the display is complete.
$ ("#menuContent"). CSS ({left:165 + "px", top:125+ "px"}). Slidedown ("fast");

$ ("body"). Bind ("MouseDown", onbodydown);//Bind the mouse to the body to press the event
}
function Hidemenu () {
$ ("#menuContent"). Fadeout ("fast");
$ ("body"). Unbind ("MouseDown", Onbodydown);
}
An event represents the state of an incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
Event.target Target DOM elements that directly accept events
function Onbodydown (event) {
If the ID of the target DOM element that accepts the event is not MENUBTN (select) or not menucontent (menu content) or the number of elements in the Menucontent object is not greater than 0
Click Not to select the button, not the menu content when you hide the dropdown directory
if (!) ( Event.target.id = = "Menubtn" | | Event.target.id = = "Menucontent" | | $ (event.target). Parents ("#menuContent"). length>0)) {
Hidemenu ();
}
}
$ (document). Ready (function () {
$.fn.ztree.init ($ ("#treeDemo"), setting); Static, Znodes
});
-->
</SCRIPT>

3, the background to provide data code. Self-organizing strings that conform to ztree requirements.

list<map> menulist = Dmbzyjwhbmanager.yjztree ("2", "2");
Super.ajaxout (Jsonarray.fromobject (menulist). ToString (), response);