前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么。 jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件。 AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能。 因此,花了一点时间做了一个例子将ZTree应用到AngularJS中。
zTree和后台数据的交互
首先,肯定是在页面中引入Angularjs的相关脚本,例如模块(e.g. app.js)、控制器(e.g. controller.js)、Angularjs的脚本并进行相关标记的使用,然后引入zTree的样式包和zTreed 脚本,可以参看一下代码:<link href="plugins/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/zTreeStyle.css" rel="stylesheet">
<% include ./../include/header.html %>
<% include ./../include/top-menu.html %>
<div id="content" class="content clearfix" ng-controller="wtConfigInfo">
<script src="plugins/jquery-1.11.3.min.js" type="text/javascript">
<script src="plugins/bootstrap-3.3.5/js/bootstrap.min.js" type="text/javascript">
<script src="..//js/angular.min.js" type="text/javascript">
<script src="..//js/angular/app.js" type="text/javascript">
<script src="..//js/angular/controllers.js" type="text/javascript">
<script src="../plugins/zTree/jquery.ztree.all-3.5.js" type="text/javascript">