树形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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...