The tree Ztree and the Angularjs combine, realizes the subordinate data asynchronously to load, clicks the check box to fill in the input box

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