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

html:

<link href="vendors/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

生态系统类型*：

<asp:TextBox ID="TextBox3" CssClass="form-control" runat="server" MaxLength="200" autocomplete="off"></asp:TextBox>

<ul class=" dropdown-menu">

<li>

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

</li>

<li class="ddl_close"><span>关闭</span></li>

</ul>

<script src="vendors/zTreeStyle/jquery-migrate-1.2.1.js"></script>//ztree 与jquery 版本兼容

<script src="vendors/zTreeStyle/jquery.ztree.core-3.4.js"></script>

<script src="vendors/zTreeStyle/jquery.ztree.excheck-3.4.js"></script>

<script src="vendors/bower_components/angular/angular.min.js"></script>

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

})

})

//-------------angularcontroller----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<l;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,0);">$scope.ecosystemTypeList); //生成树

});

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!