html:

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為桐廬企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，桐廬網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

    <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><!--復(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 自己寫方法了

    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;//添加樹前面的加號(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í)樹前面的加號(hào)  

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

        }

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

        //console.log(data);

    });

}

angularjs---end

文章題目：樹形ztree與angularjs結(jié)合，實(shí)現(xiàn)下級(jí)數(shù)據(jù)異步加載，點(diǎn)擊復(fù)選框填寫到輸入框里
網(wǎng)頁(yè)網(wǎng)址：http://aaarwkj.com/article44/jpodee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、做網(wǎng)站、用戶體驗(yàn)、響應(yīng)式網(wǎng)站、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)