easyui tree

原创 2015年11月19日 17:33:31

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

EasyUI tree菜单添加、删除、保存

效果图: html代码: /easyui/themes/default/easyui.css"> /easyui/themes/icon.css"> /ea...
  • shi_longyan
  • shi_longyan
  • 2015年10月23日 15:21
  • 3542

将easyui中的tree改为自定义的样式(包括修改字体大小,ul容器的高度...)

工作中需要在前台显示一个树状图,但时easyui默认的tree实在太丑,就想着试试能不能修改源码,改为自定义的样式。打开easyui.css可以看到在从2004-2157行是关于easyui tree...
  • D_DongHappy
  • D_DongHappy
  • 2017年01月09日 17:09
  • 4701

easyui改变tree的字体颜色,大小。

自己想做点东西,用easyui的时候发现tree的样子好难看,但是在网上搜索不到相关修改字体颜色的方法。自己研究了一下,希望能帮到那些和我一样困惑的人; 改变tree 字体颜色,大小: 两种解决方案:...
  • Brain_Storming
  • Brain_Storming
  • 2016年07月01日 18:46
  • 8076

EasyUI中tree组件不显示数据或者显示undefined的解决方案

这几天学习easyUI,用到了tree组件,蛋疼了N天,终于出来了,现在总结几个问题。 1、官方demo里,取的数据都是在.json文件里取的,在实际应用中显然不能这么做,要从数据库中取出,那么问题...
  • zw0283
  • zw0283
  • 2015年05月08日 08:24
  • 5793

easyui tree 前端 递归加载数据 查询树节

dwr 返回的数据格式 var treeData =[ {"id":"1200000100","parentId":"0","text":"苏州报表中心","staffId":"120000101...
  • snowvhaha
  • snowvhaha
  • 2017年02月23日 16:44
  • 785

easyui tree的简单使用

1、帮助文档 先看下API中怎么说的吧: 2、前台: $("#tree").tree({ url:'getOrgTree.do', met...
  • pcxbest
  • pcxbest
  • 2014年03月24日 16:31
  • 8071

EasyUI中tree的使用

展示树的方法有很多,在DRP中用过最原始的递归的方法,接触过ztree这次在公司使用的是比较熟悉的easyui,虽然easyui使用的比较多,但是从来没有用过tree,这次是边看帮助边做总结一下其中自...
  • u013030682
  • u013030682
  • 2016年06月05日 21:31
  • 826

easyUI tree数据格式的转换

easyUI tree数据格式的转换最近在写前端界面时,要把后端存储在数据库的数据在前端以tree的形式展示出来,记录之间的关系由id-pid确定,这与easyUI tree所需要的数据格式不同,需要...
  • stSahana
  • stSahana
  • 2016年08月08日 10:52
  • 525

easyui tree插件扩展

/** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * 其中,tre...
  • stalwartwill
  • stalwartwill
  • 2014年06月26日 15:43
  • 4413

生成符合EasyUI-Tree的JSON数据

EasyUI的Tree部件的数据格式为: [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children"...
  • mx617276959
  • mx617276959
  • 2015年06月12日 10:38
  • 3093
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui tree
举报原因:
原因补充:

(最多只允许输入30个字)