JQuery EasyUI(48)

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

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

0 ·

CC 4.0 BY-SA版权

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

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的ComboTree组件，包括其加载方式、属性列表及方法列表。ComboTree是一种结合了下拉框和树型控件功能的组件，用于展示具有层级关系的数据选项。

第三十七章： ComboTree（树型下拉框）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式：

//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>
      <select class="easyui-combotree" style="width:20px;" data-options="url:tree.json"></select>
      <input type="button" value="按钮" onclick="abc();">
  </body>
</html>

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

//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>
    <input type="text" id="box">
    <input type="button" value="按钮" onclick="abc();">   
  </body>
</html>

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

function abc(){

}

二、属性列表：

ComboTree属性
属性名	类型	说明
editable	boolean	定义用户是否直接输入文本到字段中，默认为false。

//属性列表，树型下拉框属性扩展自combo（自定义下拉框）和tree（树型控件）。

PS：该事件的属性完全继承自combo（自定义下拉框）和tree（树型控件）。

<!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>
   <input type="text" id="box">
   <input type="button" value="按钮" onclick="abc();">   
  </body>
</html>

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

function abc(){

}

三、方法列表：

树型下拉框方法扩展自combo（自定义下拉框）

ComboTree方法
方法名	参数	说明
options	none	返回属性对象。
tree	none	返回树型对象。
loadData	data	读取本地树型数据。
reload	url	再次请求远程树数据。通过'url'参数重写原始URL值。
clear	none	清空控件的值。
setValues	values	设置组件值数组。
setValue	value	设置组件值。

<!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>
   <input type="text" id="box">
   <input type="button" value="按钮" onclick="abc();">   
  </body>
</html>

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

function abc(){

    /*
    var t = $('#box').combotree('tree');
    console.log(t.tree('getSelect'));


    $('#box').comtree('loadData',[
          {
           text:'加载',
          }
     ]);   

    $('#box').combotree('reload');

    $('#box').combotree('clear');

    $('#box').combotree('setValue',1);

    $('#box').combotree('setValues',[1,2,'abc']);

    */
}

作者：Roger_CoderLife

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

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