目录
前言
用这个dynatree写了一个前端的树形结构，还挺好用的。这里总结一下。
官网：https://plugins.jquery.com/dynatree/
依赖jquery
示例
htmlDemo
<div class="col-xs-8">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="taxItem">核税项目：</label>
<input type="hidden" name="taxItemKeys"/>
<input id="taxItem" name="taxItemNames" class="col-xs-9" type="text" readonly="true" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" placeholder="所属核税项目">
<div class="btn-group">
<span class="btn btn-white dropdown-toggle" οnclick="document.getElementById('taxItem_treeDv').setAttribute('class','form-group');">
<span class="ace-icon fa fa-caret-down icon-only"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-8">
<div class="hide" id="taxItem_treeDv">
<label class="col-xs-2 control-label no-padding-right">请选择：</label>
<div class="widget-box col-xs-7" style="max-height:250px;overflow-x:hidden;">
<div id="inTaxItemTree"></div>
</div>
</div>
</div>初始化树结构
jQuery("#inTaxItemTree").dynatree({
debugLevel: 0,
selectMode: 2,
checkbox: true,
minExpandLevel: 1,
initAjax: {url: "taxItem/treeList.htm"},
ajaxDefaults: {cache: false, dataType: "json"},
onSelect: function (select, node) {
var nodes = node.tree.getSelectedNodes();
var titles = [];
var keys = [];
$(nodes).each(function (index, item) {
var data = item.data ;
if (!data.folder){
titles.push(data.title);
keys.push(data.key);
}
});
$("input[name='taxItemKeys']").val(keys);
$("#taxItem").val(titles.join("，"));
}
});参数说明
- debugLevel 调试模式：0.关闭；1.normal；2.debug
- selectMode 1:单选；2:多选；3:多层多选
- checkbox 是否显示选择框
- minExpandLevel 最小折叠层数
- ajaxDefaults 配置ajax请求的参数
- onSelect 选中节点触发事件
- initAjax 初始化数据请求的ajax地址 ↓传参示例↓ （大数据量建议采用延迟加载子节点）
initAjax: {
url: "taxItem/treeList.htm",
data:{
"param1":"val1",
"param2":"val2"
}
}ajax返回值格式
对返回数据格式严格要求，将自动处理
java对象示例
/**
* @author 954L
* @create 2019/11/1 14:08
*/
public class DynaTreeResult {
/**
* 显示的名称
*/
private String title;
/**
* val
*/
private String key;
/**
* 是否是父节点
*/
private Boolean isFolder;
/**
* 子节点
*/
private List<DynaTreeResult> children;
// get,set
}构造数据递归示例
List<DynaTreeResult> dynaTreeResultList = new ArrayList<>();
// 构造树结构
for (TaxItem.TaxItemVO taxItemVO : taxItemVOList) {
if (!taxItemVO.getParentId().equals("0")) break;
DynaTreeResult dynaTreeResult = new DynaTreeResult();
dynaTreeResult.setKey(taxItemVO.getId());
dynaTreeResult.setFolder(true);
dynaTreeResult.setTitle(taxItemVO.getItemName());
// 递归查找
findChildren(dynaTreeResult, new ArrayList<>(taxItemVOList));
dynaTreeResultList.add(dynaTreeResult);
}
return dynaTreeResultList;
private void findChildren(DynaTreeResult dynaTreeResult, ArrayList<TaxItem.TaxItemVO> taxItemVOList) {
List<DynaTreeResult> dynaTreeResultChildrenList = new ArrayList<>();
for (TaxItem.TaxItemVO taxItemVO : taxItemVOList) {
if (taxItemVO.getParentId().equals(dynaTreeResult.getKey())) {
DynaTreeResult dynaTreeResultChildren = new DynaTreeResult();
dynaTreeResultChildren.setKey(taxItemVO.getId());
dynaTreeResultChildren.setTitle(taxItemVO.getItemName());
dynaTreeResultChildren.setFolder(taxItemVO.getIsSort().equals(1) ? true : false);
findChildren(dynaTreeResultChildren, taxItemVOList);
dynaTreeResultChildrenList.add(dynaTreeResultChildren);
}
}
dynaTreeResult.setChildren(dynaTreeResultChildrenList);
}js处理数据回显
$("#inTaxItemTree_new").dynatree("getRoot").visit(function(node){
$(data).each(function (index, item) {
if (item.id == node.data.key){
node.select(true);
node.makeVisible();
return false;
}
})
});函数说明
- tree.dynatree("getRoot") 获取树结构所有根节点
- tree.dynatree("getRoot").visit(fun) 遍历每个节点的子节点
- node.select(true) 选中该节点的多选框
- node.makeVisible() 展开该节点的所有父节点
api介绍（内容摘自网络，自行校验是否可行）
初始化树结构其余参数
- title 设置树名称
- imagePath 引用图标路径
- keyboard 键盘导航
- autoFocus 自动设置焦点
- persist 从cookie中读取数据
- noLink 使用span标签替换a标签，取消悬浮显示a标签效果
节点的其余属性
- isLazy 是否延迟加载
- title 显示的节点名字
- key 节点唯一标识
- isFolder 是否是父节点（可展开）
- tooltip 鼠标显示
- icon 图标
- addClass 添加class属性
- noLink 使用span标签替换a标签，取消悬浮显示a标签效果
- activate 初始活动状态
- focus 初始获得焦点
- hideCheckbox 隐藏选择框
- unselectable 不可被选中
- children 子节点
树对象的事件函数
- onLazyRead 延迟加载子节点
- onPostInit 处理初始化节点是否选中
- ajaxDefaults ajax的属性配置
- onClick 点击事件
- strings 显示加载中的提示信息 ↓传参示例↓
strings:{
loading:"加载中.....",
loadError:"加载异常！"
}树对象的api函数
- tree.dynatree("disable") 禁用树
- tree.dynatree("enable") 启用树
- tree.dynatree("option", "属性名", "属性值") 设置树的属性
- tree.dynatree("getTree") 获取树对象
- tree.dynatree("getRoot") 获取树的根节点
- tree.dynatree("getActivateNode") 获取当前选中的节点
- tree.dynatree("getSelectedNodes") 获取所有被选中的节点
- tree.count() 获取节点数量
- tree.disable() 禁用树
- tree.enable() 启用树
- tree.enableUpdate() 设置树是否可以更新
- tree.getActivateNode() 获取当前选中的节点
- tree.getNodeByKey(key) 根据key获取节点对象
- tree.getRoot() 获取根节点
- tree.getSelectedNodes() 获取所有选中的节点
- tree.reload 重新加载树
- tree.visit(fun) 遍历所有节点
树节点的api函数
- node.activate() 将节点设为活跃并触发activate事件
- node.activateSilently() 将节点设为活跃不触发activate事件
- node.deactivate() 取消节点活跃状态
- node.isActive() 获取活跃状态
- node.addChild(nodeData,[beforeNode]) 为节点添加子节点
- node.appendAjax(ajaxOptions) ajax方式添加节点
- node.countChildren() 获取子节点数量
- node.expand(true) 是否展开该节点
- node.focus() 设置节点为焦点
- node.isFocused() 获取节点焦点状态
- node.getLevel() 获取该节点的层级
- node.getChildren() 获取该节点的所有子节点
- node.hasChildren() 该节点是否有子节点
- node.isChildOf(otherNode) 判断是否是另一个节点的子节点
- node.isExpanded() 获取该节点的展开状态
- node.isFirstSibling() 是否是所有兄弟节点中的第一个节点
- node.isLastSibling() 是否是所有兄弟节点中的最后一个节点
- node,isLazy() 获取该节点的lazy状态
- node.isSelected() 获取该节点的选中状态
- node.isVisible() 获取该节点的可见状态
- node.makeVisible() 展开该节点的所有父节点
- node.move(targetNode, node) 移动目标节点到另一个节点
- node.reloadChildren(callback) 重新加载该节点及所有子节点（node属性必须lazy延迟加载）
- node.remove() 移除该节点
- node.removeChildren() 移除所有子节点
- node.resetLazy() 重置该节点的lazy属性，移除所有子节点
- node.select(true) 选中该节点
- node.setLazyNodeStatus(status) 设置该lazy节点点击样式； ↓status示例↓
DTNodeStatus_Loading(等待样式)；DTNodeStatus_Error(加载错误样式)；DTNodeStatus_ok(移除lazy属性)
- node.setTitle() 设置该节点的显示名字
- node.sortChildren(cmp, deep) 对该节点所有子节点进行排序；cmp：排序函数；deep：排序层级，true：所有
- node.toggleSelect() 反选节点
- node.visit(fun) 遍历该节点所有子节点
- node.visitParents(fun) 遍历所有父节点
对你有帮助的话，右上角给个赞呗~
