(简)树形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://myzitong.com/article/pgshhg.html