如何使用 jQuery EasyUI 设计组合树？

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

组合树是一个 UI 组件，它是下拉树与选择控件的组合。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

注意：在执行以下代码时，请注意预编译文件的正确文件路径。

示例 1：以下示例使用文件“dataTree.json”和 jQuery EasyUI 库演示了基本的组合树。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
  
    
    
    

  

    jQuery EasyUI ComboTree
  
    
        Click the button to show 
        the data tree.
    
  
    
  
    
    
  
        
  
            
            
        
    

  

dataTree.json：以下是所有数据示例中使用的文件“dataTree.json”的代码。

Javascript

[{
    "id":1,
    "text":"Users",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":101,
            "text":"Family"
        },{
            "id":102,
            "text":"Colleagues"
        },{
            "id":103,
            "text":"Relatives"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":131,
            "text":"Intel"
        },{
            "id":132,
            "text":"nodejs",
            "attributes":{
                "p1":"my Attribute1",
                "p2":"my Attribute2"
            }
        },{
            "id":133,
            "text":"Common files"
        },{
            "id":134,
            "text":"Mail",
            "checked":true
        }]
    },{
        "id":13,
        "text":"home.html"
    },{
        "id":14,
        "text":"tutorials.html"
    },{
        "id":15,
        "text":"jobs.html"
    }]
}]

输出：

• 带有初始化值的组合树：
• 基本组合树：

示例 2：以下代码演示了在组合树上执行的基本方法。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
  
    
    
    

  

    jQuery EasyUI ComboTree 
  
    Click the buttons 
  
    
  
        
            
        
    
  
    
    
    
  
        
        
            GetValue
        
          
        
            SetValue
        
          
        
            Disable
        
          
        
            Enable
        
    
  
    
  
        /* Method to get value */
        function getValue() {
            var val = $('#combotreeID')
                .combotree('getValue');
  
            $('#resultDivID')
                .html(val + " is set");
        }
  
        /* Method to set value */
        function setValue() {
            $('#combotreeID')
                .combotree('setValue', '103');
        }
  
        /* Method to disable select button */
        function disable() {
            $('#combotreeID')
                .combotree('disable');
        }
  
        /* Method to enable select button */
        function enable() {
            $('#combotreeID')
                .combotree('enable');
        }
    

  

输出：

• 执行前：
• 执行后：