树形ztree与angularjs结合，实现下级数据异步加载，点击复选框填写到输入框里
html:
创新互联建站长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为桐庐企业提供专业的成都网站制作、成都网站设计，桐庐网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
js:
//--------------------------------下来框的显示与隐藏----------用与带多选按钮的下拉框，不能点一下就关闭 ------------------------
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": "" }//联动上下级勾选{ "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 //点击加减号也加载子层数据
}
};
//正常的异步应该用ztree的async,但我用的时候一直提示：请求的资源不支持 http 方法“GET”，其实我已经早改成post了 没找到解决办法 ，只好用callback 自己写方法了
function showchild(event, treeId, treeNode, clickFlag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//删除当前节点的子节点，重新加载
//treeObj.removeChildNodes(treeNode);
var parentZNode = treeObj.getNodeByParam("RiverID", treeNode.RiverID, null);//获取指定父节点
// console.log(parentZNode);
if (parentZNode.children == undefined) {
//绑定子节点数据
$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;//添加树前面的加号 ,因为异步加载 提前不知道有没有下级
}
newNode = treeObj.addNodes(parentZNode, jsondata, false);
}
});
} //else { alert("不重新加载数据"); }
};
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);
}
//绑定默认显示的一级河流
$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;//添加一级树前面的加号
$scope.RiverFirstList[i].pid = "0";
}
$.fn.zTree.init($("#treeriver"), $scope.setting, $scope.RiverFirstList);
//console.log(data);
});
}
angularjs---end
当前文章：树形ztree与angularjs结合，实现下级数据异步加载，点击复选框填写到输入框里
地址分享：http://6mz.cn/article/jpodee.html