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

html:

    <link href="content/script/ztree/zTreeStyle.css" rel="stylesheet" />

    <script src="content/script/jquery.min.js"></script>

    <script src="content/script/ztree/jquery-migrate-1.2.1.js"></script><!--jquery-migrate用与jquery高低版本兼容 （此处用于树形）-->

<script src="content/script/ztree/jquery.ztree.core.js"></script><!--树形基本文件-->

    <script src="content/script/ztree/jquery.ztree.excheck.js"></script><!--复选框-->

<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 h550 scroll river_cut_drop" style="display:none;">

                                    <ul id="treeriver" class="ztree"></ul>

                                </div>

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