EasyUI–树形控件tree详解-阿里云开发者社区

EasyUI–树形控件tree详解

2021-11-16 552

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 树形控件还是经常使用的，比如菜单、部门管理等涉及到有归属关系的功能经常在前端页面采用树形结构表示。EasyUI对树形控件的封装非常的Nice，尤其是对复选框的支持简直是漂亮异常。本篇就最常用的菜单数为例演示EasyUI中tree的使用。先看示意图：

具体代码如下，注意文字描述部分说明：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>树tree示例</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
  <div class="easyui-panel" title="示例1 绑定json数据的树" style="width:480px;padding:10px 10px;">
    <div>注意json数据中的关键键名id/text/children/state，分别表示树节点的id值，显示文本、子节点组、节点状态（是否展开）</div>
    <div>data-options参数url表示数据来源，animate表示是否采用展开和关闭节点时的动画效果，lines表示节点间是否采用节点线(更加美观)</div>
    <div id="tree1" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,lines:true"></div>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelected()">获取选中项</a>
  </div>
  <div class="easyui-panel" title="示例  带复选框的tree" style="width:480px;padding:10px 10px;">
    <div>注意checkbox:true启用后，功能非常强大</div>
    <div>1,可以选择多个选项，并可以获取所有选中项信息</div>
    <div>2,在父节点选中后，子节点会自动全选</div>
    <div>3,子节点选中1个以上后，父节点会自动变为部分选中状态，子节点全部选中后，父节点变为选中状态</div>
    <div id="tree_check" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,checkbox:true">
    </div>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getChecked()">获取选中项</a>
  </div>
  <script type="text/javascript">
    function getSelected(){
      var node = $('#tree1').tree('getSelected');
      if (node){
        var id = node.id;
        var text=node.text;
        alert("id:"+id+" text:"+text);
      }
    }
    function getChecked(){
      var nodes = $('#tree_check').tree('getChecked');
      var result = '选中项：';
      for(var i=0; i<nodes.length; i++){
        result += nodes[i].id+","+nodes[i].text+"/";
      }
      alert(result);
    }
  </script>
  </body>
</html>

最后，要理解tree_data.json文件中的层级关系，在MyEclipse中编辑json文件时，可以使用右键-【format text】功能自动给json格式化，这样会好看很多。

[
    {
        "id":1,
        "text":"所有功能",
        "children":[
            {
                "id":11,
                "text":"人员管理",
                "children":[
                    {
                        "id":111,
                        "text":"添加人员"
                    },
                    {
                        "id":112,
                        "text":"删除人员"
                    },
                    {
                        "id":113,
                        "text":"修改人员信息"
                    }
                ]
            },
            {
                "id":12,
                "text":"部门管理",
                "state":"closed",
                "children":[
                    {
                        "id":121,
                        "text":"添加部门"
                    },
                    {
                        "id":122,
                        "text":"删除部门"
                    },
                    {
                        "id":123,
                        "text":"Microsoft Office"
                    },
                    {
                        "id":124,
                        "text":"Games",
                        "checked":true
                    }
                ]
            },
            {
                "id":13,
                "text":"权限管理"
            },
            {
                "id":14,
                "text":"角色管理"
            },
            {
                "id":15,
                "text":"菜单管理"
            }
        ]
    }
]

EasyUI–树形控件tree详解

热门文章

最新文章

相关电子书