(簡)樹形ztree 與angularjs結合，實現下級數據，點擊復選框 填寫到輸入框裏
<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();
})
})
//-------------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<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,$scope.ecosystemTypeList); //生成樹
});
});
(簡)樹形ztree 與angularjs結合，實現下級數據，點擊復選框 填寫到輸入框裏