原创

Jquery EasyUI中Tree树控件结构应用案例讲解

Tree树控件使用$.fn.tree.defaults重写默认值对象,在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

        定义静态的html使用Tree树控件,标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中,以下显示的元素将被用作树节点嵌套在<ul>元素中,具体代码如下:

<ul id="yoodb" class="easyui-tree">   
    <li>   
<span>Folder 1</span>   
<ul>   
    <li>   
<span>Sub Folder 1</span>   
<ul>   
    <li>   
<span><a href="#">File 1</a></span>   
    </li>   
    <li>   
<span>File 2</span>   
    </li>   
    <li>   
<span>File 3</span>   
    </li>   
</ul>   
    </li>   
    <li>   
<span>Sub File 2</span>   
    </li>   
    <li>   
<span>Sub File 3</span>   
    </li>   
</ul>   
    </li>   
    <li>   
<span>Folder 2</span>   
    </li>   
</ul>

定义在一个空<ul>元素利用Jquery加载数据,具体代码如下:

<ul id="yoodb"></ul>

$('#yoodb').tree({    
    url:'tree_data.action'   
});

EasyUI使用loadFilter函数处理,JSON数据代码如下:

$('#yoodb').tree({    
    url:'tree_data.action',
    loadFilter: function(data){    
if (data.result){    
    return data.result;    
} else {    
    return data;
}    
    }    
});

注意:loadFilter类型(function) 返回过滤的数据去显示。这个函数需要一个参数'data',表示原始数据。你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有'total'和'rows'特性。

树控件数据格式化,每个节点都具备以下属性:

id:节点ID,对加载远程数据很重要。

text:显示节点文本。

state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。

checked:表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信