Jquery.dynatree基础示例

我会带着你远行 2023-05-30 08:49 19阅读 0赞

**目录**

前言

示例

htmlDemo

初始化树结构

ajax返回值格式

api介绍（内容摘自网络，自行校验是否可行）

初始化树结构其余参数

节点的其余属性

树对象的事件函数

树对象的api函数

树节点的api函数

--------------------

## 前言 ##

用这个dynatree写了一个前端的树形结构，还挺好用的。这里总结一下。

官网：[https://plugins.jquery.com/dynatree/][https_plugins.jquery.com_dynatree]

依赖jquery

## 示例 ##

### **htmlDemo** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70][]

### **初始化树结构** ###

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返回值格式** ###

**对返回数据格式严格要求，将自动处理**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70 1][]

**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)                                            遍历所有父节点

对你有帮助的话，右上角给个赞呗~

[https_plugins.jquery.com_dynatree]: https://plugins.jquery.com/dynatree/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108151726522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191108153121691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw==,size_16,color_FFFFFF,t_70