easyui tree

最近项目中要用树展现一些数据，所以就找了一下，最后发现了easyui。他就提供了很多的树，我用到的是带勾选框的树，所以下面会主要介绍带勾选框的树的简单用法。

首先看一下这棵树长成什么鸟样

对，就是上面那鬼样。

要想用这棵树首先还是要引入easyUI的样式和库（注意：easyUI是依赖于jquery的，所以要先引入jquery再引入easyui）

然后就是要定义要显示树的容器

<ul id="tt3"  class="easyui-tree" data-options="animate:true,checkbox:true"></ul>

再这里id是必须的，因为给操作这可树很多时候都是要用到这里的id，

data-options是这个树的一些配置参数:

animate:true    是让这颗树展开或者缩起来显示动画，

checkbox:true   是要显示有勾选框的树，

url:超链接     用于载入y远程数据的超链接地址，

method:post/get   获取数据的http请求方法，

onlyLeafCheck:false  是否在在叶子节点钱才显示勾选框，

dnd:false   是否支持拖拽

data:arry   将被载入的节点数据  

注意的是每一个节点都要有固定的格式，不然不会被识别。每个节点包括以下这些：

• id：节点的唯一标识。
• text：显示在节点上的文本。
• checked：节点是否被选择。
• attributes：节点的自定义属性。
• target：目标DOM对象。

我这里有一个简单的树的数据

var rootData = [    {        id: '1',        name: '这是第一层（1）',        'children': [            {                id: '1.1',                name: '这是第二层（1.1）',                'children': [                    {                        id: '1.1.1',                        name: '这是第三层（1.1.1）',                        'children': []                    },                    {                        id: '1.1.2',                        checked: 'true',                        name: '这是第三层（1.1.2）',                        'children': []                    }                ]            },            {                id: '1.2',                name: '这是第二层（1.2）',                'children': []            },            {                id: '1.3',                name: '这是第二层（1.3）',                'children': []            }        ]    },    {        id: '2',        name: '这是第一层（2）',        'children': [            {                id: '2.1',                name: '这是第二层（2.1）',                'children': []            },            {                id: '2.2',                name: '这是第二层（2.2）',                'children': []            },            {                id: '2.3',                name: '这是第二层（2.3）',                'children': []            }        ]    },    {        id: '3',        name: '这是第一层（3）',        'children': []    }];

很多人看到这个数据发现我这颗树没有使用text 而是使用的name ;（其实是由于我项目中的数据是name所以我改了easyui的库）

这里的item就是每一个节点的对象，我这样改了之后就可以显示树节点的名字了

怎样把这颗树的数赋值给上面那个id为tt3的div呢？其实很简单只需要简单的一行js代码就可以实现了

$('#tt3').tree({data: rootData});

既然是带勾选框的，那么怎么才能找到我们已经勾选上的树的节点便是一个很中要的事，当然easyui还是提供了方法的，这个方法便是

var chsoeNodeArry = [ ];chsoeNodeArry = $('#tt3').tree('getChecked');

通过这个方法我们便可以得到一个勾选上的所有节点的数组。

当然这里对树还有很多的操作，easyui也提供了很多的事件和方法

例如点击节点可以对节点进行编辑

<ul id="tt" class="easyui-tree"    data-options="url:'tree_data.json',animate:true,onClick:function(node){$(this).tree('beginEdit',node.target)}"></ul>

大家可以去这里jQuery EasyUI 1.3 中文文档--数据表格和树形菜单去查看更多的事件和方法。