关闭

easyui tree

标签: htmltreeeasyuijquery
267人阅读 评论(0) 收藏 举报
分类:

最近项目中要用树展现一些数据,所以就找了一下,最后发现了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 中文文档--数据表格和树形菜单去查看更多的事件和方法。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16901次
    • 积分:11
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:4条
    文章分类