树形ztree与angularjs结合，实现下级数据异步加载，点击复选框填写到输入框里

html:

创新互联建站长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为桐庐企业提供专业的成都网站制作、成都网站设计，桐庐网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

js:

//--------------------------------下来框的显示与隐藏----------用与带多选按钮的下拉框，不能点一下就关闭 ------------------------

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": "" }//联动上下级勾选{ "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    //点击加减号也加载子层数据                                         

        }

    };

//正常的异步应该用ztree的async,但我用的时候一直提示：请求的资源不支持 http 方法“GET”，其实我已经早改成post了  没找到解决办法 ，只好用callback 自己写方法了

    function showchild(event, treeId, treeNode, clickFlag) {       

        var treeObj = $.fn.zTree.getZTreeObj(treeId);

        //删除当前节点的子节点，重新加载

        //treeObj.removeChildNodes(treeNode);

       var parentZNode = treeObj.getNodeByParam("RiverID", treeNode.RiverID, null);//获取指定父节点

        //  console.log(parentZNode);

        if (parentZNode.children == undefined) {

            //绑定子节点数据

            $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;//添加树前面的加号  ,因为异步加载  提前不知道有没有下级

                    }

                    newNode = treeObj.addNodes(parentZNode, jsondata, false);

                }

            });

       }  //else { alert("不重新加载数据"); }

    };

    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);

    }

    //绑定默认显示的一级河流

    $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;//添加一级树前面的加号  

            $scope.RiverFirstList[i].pid = "0";

        }

        $.fn.zTree.init($("#treeriver"), $scope.setting, $scope.RiverFirstList);

        //console.log(data);

    });

}

angularjs---end