📌  相关文章
📜  如何使用 jQuery EasyUI 为网页设计复杂的布局?

📅  最后修改于: 2021-11-10 05:47:15             🧑  作者: Mango

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

在本文中,我们将学习使用 jQuery EasyUI插件为任何网页设计基本和复杂的布局。

EasyUI for jQuery 下载:

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

注意:在执行以下代码时,请注意正确的文件路径。

示例 1:以下示例演示了使用 jQuery EasyUI 框架对学生数据进行基本布局设计。学生数据采用 JSON 格式。

HTML


  

    
    
  
    
    
  
    
  
    
  
    
    
      
    
    

  

    

        jQuery EasyUI basic layout with          all direction regions     

            
           
                    
        
                   
        
           
        
           
                                                                                                                                                                                                                                                                                                                                                                 
Student ID                         Name                             Marks                         Age                                                      Gender                         
        
    
  


HTML


  

    
    
  
    
    
    
    
  
    
    
  
    
    

  

    

jQuery EasyUI complex layout design

            
           
        
                            
        
                   
                            
                
        
           
                            
                                   
                    Algorithms                 
                                   
                    Python                 
                                   
                    Perl                 
            
        
        
               
                               
                
                                   
                                                                                                                                                                                                                                                                                                                                                     
                                    Student ID                                                                      Name                                                                      Marks                                                                      Age                                                                      Gender                                 
                
            
        
    
  


HTML


  

    

  

    

        HTML content for Python.     

       
            
  •             Python is a high-level, general             -purpose and a very popular              programming language.         
  •                    
  •             Python programming language              (latest Python 3) is being              used in web development,          
  •                    
  •             Machine Learning applications,              along with all cutting edge              technology in Software Industry.         
  •                    
  •             Python Programming Language is              very well suited for Beginners,         
  •                    
  •             also for experienced programmers              with other programming languages              like C++ and Java.         
  •     
  


datafile.json:以下是上述代码中使用的“datafile.json”文件的内容。

{
    "total": 10,
    "rows": [
        { 
            "studentname": "Komal", "age": 10, "gender": "F", 
            "marksscored": 365, "studentid": "ST-1" 
        },
        { 
            "studentname": "Dalton", "age": 12, "gender": "M",
            "marksscored": 185, "studentid": "ST-10" 
        },
        
        { 
            "studentname": "Rakesh", "age": 12, "gender": "M",
            "marksscored": 385, "studentid": "ST-11" 
        },
        
        { 
            "studentname": "Ram", "age": 12, "gender": "M",
            "marksscored": 265, "studentid": "ST-12" 
        },
        
        { 
            "selected": true, "studentname": "Ila", "age": 12,
            "gender": "F", "marksscored": 355, "studentid": "ST-13"
        },
        
        { 
            "studentname": "Manika", "age": 12, "gender": "F",
            "marksscored": 158, "studentid": "ST-14" 
        },
        
        { 
            "studentname": "Madhavi", "age": 12, "gender": "F",
            "marksscored": 456, "studentid": "ST-15" 
        },
        
        { 
            "studentname": "Preity", "age": 12, "gender": "M",
            "marksscored": 235, "studentid": "ST-16" 
        },
        
        { 
            "studentname": "Parul", "age": 12, "gender": "F",
            "marksscored": 564, "studentid": "ST-17" 
        },
        
        { 
            "studentname": "Amar", "age": 19, "gender": "F",
            "marksscored": 638, "studentid": "ST-18" 
        }
    ]
}

输出:

  • 执行前:

  • 执行后:

   

示例 2:以下示例演示了使用 jQuery EasyUI 框架为任何网页设计复杂布局。以下代码使用用于数据检索的“htmlContent.html”、“dataTree.json”和“datafile.json”文件。参考文件的树结构

HTML



  

    
    
  
    
    
    
    
  
    
    
  
    
    

  

    

jQuery EasyUI complex layout design

            
           
        
                            
        
                   
                            
                
        
           
                            
                                   
                    Algorithms                 
                                   
                    Python                 
                                   
                    Perl                 
            
        
        
               
                               
                
                                   
                                                                                                                                                                                                                                                                                                                                                     
                                    Student ID                                                                      Name                                                                      Marks                                                                      Age                                                                      Gender                                 
                
            
        
    
  

htmlContent.html:以下是上述代码中使用的“htmlContent.html”文件的内容。

HTML



  

    

  

    

        HTML content for Python.     

       
            
  •             Python is a high-level, general             -purpose and a very popular              programming language.         
  •                    
  •             Python programming language              (latest Python 3) is being              used in web development,          
  •                    
  •             Machine Learning applications,              along with all cutting edge              technology in Software Industry.         
  •                    
  •             Python Programming Language is              very well suited for Beginners,         
  •                    
  •             also for experienced programmers              with other programming languages              like C++ and Java.         
  •     
  

dataTree.json:以下是上述代码中使用的“dataTree.json”文件的内容。

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

输出:

  • 执行前:

  • 执行后: