原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

相关推荐

评论

分享:

支付宝

微信