目錄
前言
用這個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" onclick="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) 遍歷所有父節點
對你有幫助的話，右上角給個讚唄~