如何使用 jQuery EasyUI 为网页设计复杂的布局？

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
                        
        
    

  

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

输出：

• 执行前：

• 执行后：