樹(shù)形ztree 與angularjs結(jié)合，實(shí)現(xiàn)下級(jí)數(shù)據(jù)異步加載，點(diǎn)擊復(fù)選框 填寫(xiě)到輸入框里

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高低版本兼容 （此處用于樹(shù)形）-->

<script src="content/script/ztree/jquery.ztree.core.js"></script><!--樹(shù)形基本文件-->

    <script src="content/script/ztree/jquery.ztree.excheck.js"></script><!--復(fù)選框-->

<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:

//--------------------------------下來(lái)框的顯示與隱藏----------用與帶多選按鈕的下拉框，不能點(diǎn)一下就關(guān)閉 ------------------------

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": "" }//聯(lián)動(dòng)上下級(jí)勾選{ "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    //點(diǎn)擊加減號(hào)也加載子層數(shù)據(jù)                                         

        }

    };

//正常的異步應(yīng)該用ztree的async,但我用的時(shí)候一直提示：請(qǐng)求的資源不支持 http 方法“GET”，其實(shí)我已經(jīng)早改成post了  沒(méi)找到解決辦法 ，只好用callback 自己寫(xiě)方法了

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

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

        //刪除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，重新加載

        //treeObj.removeChildNodes(treeNode);

       var parentZNode = treeObj.getNodeByParam("RiverID", treeNode.RiverID, null);//獲取指定父節(jié)點(diǎn)

        //  console.log(parentZNode);

        if (parentZNode.children == undefined) {

            //綁定子節(jié)點(diǎn)數(shù)據(jù)

            $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;//添加樹(shù)前面的加號(hào)  ,因?yàn)楫惒郊虞d  提前不知道有沒(méi)有下級(jí)

                    }

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

                }

            });

       }  //else { alert("不重新加載數(shù)據(jù)"); }

    };

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

    }

    //綁定默認(rèn)顯示的一級(jí)河流

    $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;//添加一級(jí)樹(shù)前面的加號(hào)  

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

        }

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

        //console.log(data);

    });

}

angularjs---end