(简)树形ztree与angularjs结合，实现下级数据，点击复选框填写到输入框里

html:

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比简阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式简阳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖简阳地区。费用合理售后完善，10多年实体公司更值得信赖。

生态系统类型* ：

 

                   

                       

•                            

                         

                       

• 关闭

                   

  //ztree 与jquery 版本兼容

   

   

   

js:

jQuery(document).ready(function($) {

 //点击输入框的 显示下拉框

    $(".form-control").click(function() {//alert( $(this).find(".ddl_close").html());       

         $(this).next(".dropdown-menu").show()    

         $("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();

    }

}

//关闭下来

    $(".ddl_close").click(function() {

        $(this).parent(".dropdown-menu").hide();

        })

})

//-------------angular controller----js------------------------------------------

var app=angular.module('myApp',[]);

app.controller('news_Ctrl',function($scope,$http,$rootScope) {

    //绑定 生态系统类型

      $scope.setting_ecosystemType={//树形基本配置

        check: {enable: true,},

        view: {showIcon: false},     

        data: {simpleData: {enable: true}},

        callback: {onCheck: onCheck_ecosystemType}

      };

      function onCheck_ecosystemType(e,treeId,treeNode) {//点击复选框触发事件

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

        nodes=zTree.getCheckedNodes(true);

       var v="";

        for(var i=0,l=nodes.length;i

            if(nodes[i].isParent==false)

           { v+=nodes[i].name+",";}//记录底层勾选的集树，不记录父级

        }

        if(v.length>0) v=v.substring(0,v.length-1); //去掉最后一个分隔符逗号,

        $("#TextBox3").attr("value",v); //赋值到输入框TextBox3里

    }

    $http({

        method: 'post',

        url: 'WebService/ddltreeWebService.asmx/getDllTree_by_ddlNameEn',  //树形的数据地址

        dataType: "json",

        contentType: "application/json",

        data: { ddlNameEn: "ecosystemType" },//

    }).then(function successCallback(response) {

  var data = JSON.parse(response.data.d);//格式化json

        $scope.ecosystemTypeList=data;   //赋值给angular变量  //  console.log($scope.ecosystemTypeList);输出测试

        for (i = $scope.ecosystemTypeList.length - 1; i >= 0; i--) {

            $scope.ecosystemTypeList[i].open=true;//默认展开树  

        }

  $.fn.zTree.init($("#ecosystemType"),$scope.setting_ecosystemType,$scope.ecosystemTypeList); //生成树

    });

 });

当前文章：(简)树形ztree与angularjs结合，实现下级数据，点击复选框填写到输入框里
标题来源：http://bjjierui.cn/article/pgshhg.html