树形ztree 与angularjs结合，实现下级数据异步加载，点击复选框

html:

<link href="content/script/ztree/zTreeStyle.css" rel="stylesheet" />

<script src="content/script/jquery.min.js"></script>

<script src="content/script/ztree/jquery-migrate-1.2.1.js"></script><!--jquery-migrate用与jquery高低版本兼容 （此处用于树形）-->

<script src="content/script/ztree/jquery.ztree.core.js"></script><!--树形基本文件-->

<script src="content/script/ztree/jquery.ztree.excheck.js"></script><!--复选框-->

<input value="" type="text" id="river_cut" onclick="showMenu('river_cut_drop');" class=" btn btn-default dropdown-toggle w200 input_ao" style="text-align:left;" />

<div class="dropdown-menu w200 h450 scroll river_cut_drop" style="display:none;">

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

</div>

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,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

（编辑：李大同）

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