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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.