To introduce a class library:
<script type= "Text/javascript" src= "<%=path%>/js/jquery-ztree/jquery.ztree.core-3.5.js" ></script >
<link rel= "stylesheet" type= "Text/css" href= "<%=path%>/js/jquery-ztree/ztreestyle3.5/ztreestyle.css"/ >
HTML code:
<div style= "width:200px; height:550px; Float:left; Overflow-y: auto; Background: #b3d0db; " >
<ul id= "Brandproductvaluetree" class= "Ztree" ></ul>
</div>
JS Code:
$ (document). Ready (function () {
Initbrandproductvaluetree ();
});
function Initbrandproductvaluetree () {
$.fn.ztree.init ($ ("#brandProductValueTree"), {
Async: {
Enable:true,
Url:path + "/brandcustomerorder/brandcustomerorder_searchbrandproductvaluebeanforztree",//return the corresponding data in the background
Autoparam: ["_tid"],
DataType: "JSON",
Datafilter:function (Treeid, ParentNode, ResponseData) {
var result = Responsedata.data;
if (parentnode = = null) {
Result.unshift ({_tid:0, Name: "Product value Tree", Isparent:true, open:true});
}
for (var i = 0; I < Result.length;i + +) {
if (Result[i]._tpid = = 0 | | result[i].listflag) {
Result[i].isparent = true;
}
if (result[i].name) {
Result[i]._name = Result[i].name;
}else {
if (Result[i].listflag = = 1) {
Result[i]._name = "List" + Result[i].idx;
}else{
Result[i]._name = "article" + Result[i].idx;
}
}
}
return result;
},
Otherparam: ["TemplateID", TemplateID, "ProductId", ProductId]
},
Data: {
Key: {
Name: "_name"
},
Simpledata: {
Enable:true,
IdKey: "_tid",//This level ID
PIdKey: "_tpid",//Father ID
rootpid:0//Root ID
}
},
View: {
Selectedmulti:false
},
Callback: {
Beforecollapse:function (Treeid, TreeNode) {
return Treenode._tid! = 0;
},
Onasyncsuccess:function (event, Treeid, TreeNode, msg) {
Ajaxresponsevalidate (msg);
},
Onasyncerror:function () {
Alert ("Ajax access Exception");
},
Onclick:function (event, Treeid, TreeNode, Clickflag) {//Click the menu to appear, the following indicates the display and hiding of the relevant Div
if (Treenode._tid = = 0) {
$ ("#brandProductValueRootHint"). Show ();
$ ("#brandProductValueEditDiv"). Hide ();
$ ("#brandProductValueAddDiv"). Hide ();
}else {
$ ("#brandProductValueRootHint"). Hide ();
if (Treenode._tid < 0 | | treenode.listflag) {
if (Treenode.listflag) {
$ ("#brandProductValueAddDiv"). Hide ();
Showbrandproductvalueeditdiv (TreeNode);
} else {
$ ("#brandProductValueEditDiv"). Hide ();
Showbrandproductvalueadddiv (TreeNode);
}
} else {
$ ("#brandProductValueAddDiv"). Hide ();
Showbrandproductvalueeditdiv (TreeNode);
}
}
}
}
});
}
Ztree Multilevel Extension (i)