如何使用 jQuery EasyUI 设计组合网格？

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.
  
    
  
    
          
        
            
            
        
    

  

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
            
        
  
        
    
  
    
  
        /* To set and get value */
        function getValue() {
            var val = $('#combogridID').combogrid('getValue');
            $('#getValueResult').html(val + " is set");
        }
        function setValue() {
            $('#combogridID').combogrid('setValue', 'ST-14');
        }
        function setCustomValue() {
            $('#combogridID').combogrid('setValue', {
                studentid: 'ST-19',
                studentname: 'Pari'
            });
        }
  
        /* To disable the combogrid */
        function disable() {
            $('#combogridID').combogrid('disable');
        }
  
        /* To enable the combogrid */
        function enable() {
            $('#combogridID').combogrid('enable');
        }
    

  

输出：

• 基本画面：

• 动作示范：

• 自定义设置：