angular-ui-tree使用简介
今天为大家介绍下angular-ui-tree的使用方法，它是一个不依赖于jquery 的angualrJS UI,友好的外观，方便的操作，是它最大的优势。
angular-ui-tree有如下特点：
1.使用本地AngularJS范围数据绑定
2.整个树都可以进行排序和移动项目
3.防止上级节点创建子节点
废话不多说，下面上效果图
拖拽效果：
节点的添加
官方DEMO：http://angular-ui-tree.github.io/angular-ui-tree/
angular-ui-tree 下载地址： https://github.com/angular-ui-tree/angular-ui-tree
前端使用代码如下：
index.js
1、 载入angular-ui-tree.css 和 angular-ui-tree.js
2、module中加入依赖
使用页面中的代码
html
-
在标签上加入data-nodrag表示此功能不受拖动的影响 ，保证了次功能能够正确使用，不被拖动效果所覆盖，如input的聚焦效果 。
ui-tree-handle为节点拖动的指令，自由的使用或删除它我们可以限制某些特定节点禁止拖动
前端用ng-include 这种形式 模拟后端生成树
js
$scope.init=function(){
$scope.getTreeList();
}
$scope.getTreeList=function(){
OrganizationService.getOrgTreeList().then(function(result) {
$scope.angularTreeList=[];
//查询树
$scope.orgTypeList=result;
//创建根节点
var root={};
root.name="法制机构";
root.level=0;
root.sequence=1;
root.orgTypeId=-1;
root.children=$scope.orgTypeList;
$scope.angularTreeList.push(root);
$scope.treeOptions.data=$scope.angularTreeList;
});
}
//新建节点
$scope.newSubItem = function (item) {
var name=window.prompt("请输入节点的名称");
if(name==""||name==undefined){
return;
}
if(item.orgTypeId==undefined){
item.orgTypeId=-1;
}
var json={"level":parseInt(item.level)+1,"name":name,"parentTypeId":item.orgTypeId,"children":[]};
if(item.children==null||item.children.length==0){
item.children=[];
json.sequence=1;
}else{
var maxSequence=parseInt(item.children[item.children.length-1].sequence);
json.sequence=maxSequence+1;
}
OrganizationService.saveOrgType(json).then(function(result) {
// item.children.push(json);
$scope.init();
});
};
//编辑节点
$scope.editItem=function(item){
// var target=$("#div_"+item.orgTypeId);
if(item.isEdit==undefined||item.isEdit==false){
item.isEdit=true;
// $(target).removeAttr("ui-tree-handle");
}else if(item.isEdit==true){
item.isEdit=false;
// $(target).attr("ui-tree-handle",'');
var json={"orgTypeId":item.orgTypeId,"name":item.name}
OrganizationService.updateOrgType(json).then(function(result) {
// $scope.init();
});
}
}
//删除节点
$scope.removeItem=function(item){
var json={};
json.orgTypeId=item.orgTypeId;
json.status=0;
OrganizationService.updateOrgType(json).then(function(result) {
// $scope.init();
});
}
$scope.treeOptions = {
//拖拽操作 拖拽后会返回callback beforeDrop函数，我们可以重写这个函数，拖拽本质上是顺序的改变和层级的改变，所以是一个update操作
beforeDrop : function (e) {
var source = e.source.nodeScope.item;
var destRoot = e.dest.nodesScope.item ;
if(destRoot==undefined){
return $q.reject();
}
var destIndex=e.dest.index;
var dest=e.dest.nodesScope.item.children[destIndex];
if(dest==undefined){
return $q.reject();
}
if (source.parentTypeId!=dest.parentTypeId) {
return $q.reject();
}
var sourceSeq=source.sequence;
var destSeq=dest.sequence;
source.sequence=destSeq;
dest.sequence=sourceSeq;
OrganizationService.updateOrgType(source).then(function(result) {
});
OrganizationService.updateOrgType(dest).then(function(result) {
});
return;
}
};注：treeOptions中还有removed,dropped等回调方法，这里没有讲述,具体请看angular-ui-tree.js 源码
本例中的拖拽操作默认为只能同级节点之间拖拽才能生效，不是同级自动取消，当然，不是同级完全自由的也可以实现，在使用的过程中，请根据自身业务需求及数据结构自行规定拖动的规则，angular-ui-tree默认的规则是全部可以自由拖动的
最后是后端实体的结构
public class OrganizationType extends BaseEntity {
//组织类型id
private String orgTypeId;
//code
private String code;
//排序
private String sequence;
//层级
private String level;
//类型名称
private String name;
//父类型id
private String parentTypeId;
private List children;
public List getChildren() {
return children;
}
public void setChildren(List children) {
this.children = children;
}
public String getOrgTypeId() {
return orgTypeId;
}
public void setOrgTypeId(String orgTypeId) {
this.orgTypeId = orgTypeId;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getParentTypeId() {
return parentTypeId;
}
public void setParentTypeId(String parentTypeId) {
this.parentTypeId = parentTypeId;
}
public String getSequence() {
return sequence;
}
public void setSequence(String sequence) {
this.sequence = sequence;
}
public String getLevel() {
return level;
}
public void setLevel(String level) {
this.level = level;
}
public String toString() {
return "OrganizationType [orgTypeId=" + orgTypeId + ", code=" + code + ", sequence=" + sequence + ", level="
+ level + ", name=" + name + ", parentTypeId=" + parentTypeId + ", children=" + children + "]";
}
}
查询树
@RequestMapping("/getOrgTreeList.do")
@ResponseBody
public List getOrgTreeList(){
List orgTypeList= new ArrayList();
OrganizationType orgType=new OrganizationType();
orgType.setParentTypeId("-1");
orgTypeList=orgTypeService.findOrgTypeList(orgType); //把根查出来
fillTree(orgTypeList);
return orgTypeList;
}
public void fillTree(List orgTypeList){
if(orgTypeList!=null){
for(OrganizationType orgType : orgTypeList){
OrganizationType type=new OrganizationType();
type.setParentTypeId(orgType.getOrgTypeId());
List orgChildList=orgTypeService.findOrgTypeList(type);
orgType.setChildren(orgChildList);
fillTree(orgChildList);
}
}
}