JQuery EasyUI(44)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了JQuery EasyUI框架中的Tree组件，包括其加载方式、数据格式化方法及丰富的属性配置，如动画效果、复选框功能、数据加载等，适合初学者快速上手。

第三十六章： Tree（数）组件【1】

学习要点：

加载方式
属性列表

一、加载方式

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <style>
       .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>              
</head>
  <body>
   <ul class="easyui-tree">
      <li>
          <span>系统管理</span>
          <ul>
               <li>
                  <span>主机信息</span>
                  <ul>
                     <li>版本信息</li>
                     <li>数据库信息</li>
                  </ul>
               </li>
               <li>更新信息</li>
               <li>程序信息</li>
          </ul>
      </li>
      <li>
          <span>会员管理</span>
          <ul>
               <li>新增会员</li>
               <li>审核会员</li>
          </ul>
      </li>
   </ul>   
  </body>
</html>

树控件数据格式化：
id：	节点ID，对加载远程数据很重要。
text：	显示节点文本（必选）。
state：	节点状态，'open'或'closed'，默认'open'，如果为'closed'的时候，将不自动展开该节点。
checked：	表示该节点是否被选中。
attributes：	被添加到节点的自定义属性。
children：	一个节点数组声明了若干节点。

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>  
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>           
</head>
  <body>
     <ul id="box"></ul>   
  </body>
</html>

$(function(){
    $('#box').tree({
       url:tree.json,
  });
});

//tree.json
[
  { 
   "id":1,
   "text":"系统管理",
   "iconCls":"icon-save",
   "children":[
        {
           "text":"主机信息", 
           "state":"closed",         
           "children":[
               {
                 "text":"版本信息",          
               },
               {
                 "text":"数据库信息",          
               }
                    ];                    
         },
        {
           "text":"更新信息",          
         },
        {
           "text":"程序信息",          
         }
            ];
   }
  {
   "id":2,
   "text":"会员管理",
   "children":[
        {
           "text":"新增会员",          
         },
        {
           "text":"审核会员",          
         }
            ];
   }
]

二、属性列表

properGrid属性
属性名	值	说明
url	string	检索远程数据的URL地址。
method	string	检索数据的HTTP方法。（POST/GET）
animate	boolean	定义节点在展开或折叠的时候是否显示动画效果。
checkbox	boolean	定义是否在每个节点之前都显示复选框。
cascadeCheck	boolean	定义是否层叠选中状态。
onlyleafCheak	boolean	定义是否只在未及节点之前显示复选框。
lines	boolean	定义是否显示树控件上的虚线。
dnd	boolean	定义是否启用拖拽功能。
data	array	节点数据加载。
formatter	function(onde)	定义如何渲染节点的文本。
loader	function(param,success,error)	定义如何从远程服务器中加载数据。返回false可以忽略本操作。该函数具备以下参数：param：发送到远程服务器的参数对象。success（data）：当检索数据成功的时候调用的回调函数。error（）：当检索数据失败的时候调用的回调函数。
loaderFilter	function(data,parent)	返回过滤的数据进行展示。返回数据是标准树格式。该函数具备以下参数：data：加载的原始数据。param：DOM对象，代表父节点。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>   
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>           
</head>
  <body>
     <ul id="box"></ul>     
  </body>
</html>

$(function(){
    $('#box').tree({
       url:tree.json,
       animate:true,
       checkbox:true,
       cascadeCheck:true,
       onlyLeafCheck:true,
       lines:true,
       dnd:true,
       data:[{
         "text":"本地节点",
          }],

       formatter:function(node){
           console.log(node);
           return '[' + node.text + ']';
    },
  });
});

//tree.json
[
  { 
   "id":1,
   "text":"系统管理",
   "iconCls":"icon-save",
   "children":[
        {
           "text":"主机信息", 
           "state":"closed",         
           "children":[
               {
                 "text":"版本信息",          
               },
               {
                 "text":"数据库信息",          
               }
                    ];                    
         },
        {
           "text":"更新信息",          
         },
        {
           "text":"程序信息",          
         }
            ];
   }
  {
   "id":2,
   "text":"会员管理",
   "children":[
        {
           "text":"新增会员",          
         },
        {
           "text":"审核会员",          
         }
            ];
   }
]

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103763010

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载