HTML:
<input value= "" type= "text" id= "River_cut" onclick= "ShowMenu (' River_cut_drop ');" class= "btn btn-default dropdown-toggle w200 input_ao" style= "text-align:left;"/>
<div class= "Dropdown-menu w200 h450 scroll river_cut_drop" style= "Display:none;" >
<ul id= "Treeriver" class= "Ztree" ></ul>
</div>
Js:
--------------------------------down the box to show and hide the----------with a drop-down box with a multi-select button, you can close it without a click------------------------
function ShowMenu (dropname) {
$ ("." + Dropname). Slidedown ("fast");
$ ("body"). Bind ("MouseDown", Onbodydown);
}
function Hidemenu () {
$ (". Dropdown-menu"). FadeOut ("fast");
$ ("body"). Unbind ("MouseDown", Onbodydown);
}
function Onbodydown (event) {
if (! ( Event.target.id = = "Dropdown-menu" | | $ (event.target). Parents (". Dropdown-menu"). Length > 0)) {
Hidemenu ();
}
}
Angularjs
Angularjs
App.controller (' Leader_searchctrl ', function ($scope, $http, $rootScope) {
$scope. setting = {
Check: {
Enable:true,
Chkboxtype: {"Y": "", "N": "", ""}//linkage, "Y": "PS", "n": "PS"}
},
View: {
Showicon:false
},
Data: {
Simpledata: {
Enable:true,
IdKey: "Riverid",
PIdKey: "pid",
Rootpid: "0"
},
Key: {
Name: "Rivername"
}
},
Callback: {
Onclick:showchild,
Oncheck:oncheck,
Onexpand:showchild//Click Plus minus sign also load child layer data
}
};
Normal async should use Ztree async, but I used to always hint: The requested resource does not support the HTTP method "GET", in fact, I have changed to post has not found a solution, had to use callback to write their own method
function Showchild (event, Treeid, TreeNode, Clickflag) {
var treeobj = $.fn.ztree.getztreeobj (Treeid);
Delete the child nodes of the current node, reload
Treeobj.removechildnodes (TreeNode);
var parentznode = Treeobj.getnodebyparam ("Riverid", Treenode.riverid, NULL);//Gets the specified parent node
Console.log (Parentznode);
if (Parentznode.children = = undefined) {
Binding child node data
$http ({
Method: ' POST ',
URL: "Http://xxxxxx/api/Web/SelectRiverSecond",
Data:JSON.stringify ({RiverID:treeNode.RiverID}),
}). Then (function Successcallback (response) {
var jsondata = Json.parse (Response.data); Console.log (Jsondata);
if (jsondata! = NULL && Jsondata! = "") {
for (i = jsondata.length-1; I >= 0; i--) {
Jsondata[i].pid = Treenode.riverid;
Jsondata[i].isparent = true;//Add the plus sign in front of the tree because asynchronous loading doesn't know if there are any subordinates
}
NewNode = Treeobj.addnodes (Parentznode, Jsondata, false);
}
});
}//else {alert ("Do not reload Data");}
};
function OnCheck (E, Treeid, TreeNode) {
Console.log (TreeNode);
var ztree = $.fn.ztree.getztreeobj (Treeid);
nodes = Ztree.getcheckednodes (true);
v = "";
for (var i = 0, L = nodes.length; i < L; i++) {
V + = Nodes[i]. Rivername + ",";
}
if (v.length > 0) v = v.substring (0, v.length-1);
var cityobj = $ ("#river_cut");
Cityobj.attr ("value", V);
}
Binds a first-level stream that is displayed by default
$http ({
Method: ' GET ',
URL: ' Http://xxxxxx/api/Web/SelectRiverFirst ',
}). Then (function Successcallback (response) {
var data = Json.parse (Response.data);
$scope. Riverfirstlist = Data
$scope. Actionsriversecond = function (index) {
var Riverfirstid = $scope. Riverfirstlist[index]. Riverid;
$scope. Selectriversecond (Riverfirstid);
};
for (i = $scope. Riverfirstlist.length-1; I >= 0; i--) {
$scope. Riverfirstlist[i].isparent = true;//Add a plus sign in front of the first level tree
$scope. Riverfirstlist[i].pid = "0";
}
$.fn.ztree.init ($ ("#treeriver"), $scope. setting, $scope. Riverfirstlist);
Console.log (data);
});
}
Angularjs---End
The tree Ztree and the Angularjs combine, realizes the subordinate data asynchronously to load, clicks the check box to fill in the input box