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

📅  最后修改于: 2021-11-25 03:08:43             🧑  作者: Mango

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

在本文中,我们将学习如何设计组合网格。 Combogrids 是两个可编辑输入框与下拉网格面板的组合。

EasyUI for jQuery 下载:

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

示例 1:以下代码演示了使用jQuery EasyUI插件的基本组合网格。

html


  

    
    
  
    
    
  
    
  
    
  
    
    
  
    
    
  

  

    

jQuery EasyUI ComboGrid

      

Click the dropdown arrow to show the data.

       
       
                   
                     
    
  


html


  

    
    
  
    
    
          
    
  
    
  
    
    
  
    
    
  

  

    

jQuery EasyUI ComboGrid

      

Click the buttons to perform some actions.

          
        
                        
    
    
        
                             GetValue                                              SetValue                                                          Set Custom Value                                                          Disable                                                          Enable                      
           
    
          


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":"P",
       "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:以下示例演示与组合网格相关的基本操作。

html



  

    
    
  
    
    
          
    
  
    
  
    
    
  
    
    
  

  

    

jQuery EasyUI ComboGrid

      

Click the buttons to perform some actions.

          
        
                        
    
    
        
                             GetValue                                              SetValue                                                          Set Custom Value                                                          Disable                                                          Enable                      
           
    
          

输出:

  • 基本画面:

  • 动作示范:

  • 自定义设置: