📌  相关文章
📜  如何使用 jQuery EasyUI 设计组合树?

📅  最后修改于: 2021-10-29 05:56:54             🧑  作者: Mango

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.     

       
            
           
                                     
    
  


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"
    }]
}]


html


  

    
    
  
    
    
  
    
  
    
  
    
    
  
    
    

  

    

jQuery EasyUI ComboTree

       

Click the buttons

       
           
                     
    
       
    
    
                                 GetValue                                          SetValue                                          Disable                                          Enable              
          


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              
          

输出:

  • 执行前:
  • 执行后: