如何使用 jQuery EasyUI Mobile 编辑数据网格中的行？

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

在本文中，我们将学习使用 jQuery EasyUI Mobile 插件编辑 Datagrid 的行。

EasyUI for jQuery 下载：

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

示例 1：以下示例演示了使用 jQuery EasyUI Mobile 的基本数据网格。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
  
  
    
    
    
  
  
    
    
    

  

    
        
            
                
                
                
                
            
        
    
                    Student ID
                
                    Student Name
                
                    Age
                
                    Marks Scored
                
  
    
        
            
                Basic DataGrid
            
        
    
  
    
        var data = [
            {
                "studentid": "Student01", 
                  "studentname": "Smitha",
                "age": 11, "marksscored": 365
            },
            {
                "studentid": "Student02", 
                  "studentname": "Jack",
                "age": 16, "marksscored": 465
            },
            {
                "studentid": "Student03", 
                  "studentname": "Tom",
                "age": 12, "marksscored": 369
            },
            {
                "studentid": "Student04", 
                  "studentname": "Ram",
                "age": 14, "marksscored": 565
            },
            {
                "studentid": "Student05", 
                  "studentname": "Srini",
                "age": 13, "marksscored": 265
            }
        ];
  
        $(function () {
              
            /* Initialize datagrid */
            $('#tableID').datagrid({
                data: data
            });
        });
    

  

输出：

示例2：下面的示例演示了基于任意行的索引对数据网格中的行进行编辑和删除。

html

  

    
    
  
    
    
  
    
  
    
          
    
    
    
  
    
    
    
  
    
    
    
  

  

    
  
        
            
                
  
                
                
  
                
                
  
                
            
        
    
                    Student ID
                
                    Student Name
                
                    Age
                
                    Marks Scored
                
  
    
        
            
                Edit DataGrid
            
  
            
                
                
  
                
                
            
        
    
  
    
        var data = [
            {
                "studentid": "Student01", 
                "studentname": "Smitha",
                "age": 11, "marksscored": 365
            },
            {
                "studentid": "Student02", 
                "studentname": "Jack",
                "age": 16, "marksscored": 465
            },
            {
                "studentid": "Student03", 
                "studentname": "Tom",
                "age": 12, "marksscored": 369
            },
            {
                "studentid": "Student04", 
                "studentname": "Ram",
                "age": 14, "marksscored": 565
            },
            {
                "studentid": "Student05", 
                "studentname": "Srini",
                "age": 13, "marksscored": 265
            }
  
        ];
        $(function () {
            $('#tableID').datagrid({
                data: data
            });
        });
  
        var editIndex = undefined;
  
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#tableID').datagrid('validateRow', editIndex)) {
                $('#tableID').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        /* function called when one row is clicked*/
        function onClickRow(index) {
            if (editIndex != index) {
                if (endEditing()) {
                    $('#tableID').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                    editIndex = index;
                }
                else {
                    $('#tableID').datagrid('selectRow', editIndex);
                }
            }
        }
        /* Delete function */
        function remove() {
            if (editIndex == undefined) { return }
  
            $('#tableID').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
        /* Save function */
        function save() {
            if (endEditing()) {
                $('#tableID').datagrid('acceptChanges');
            }
        }
    

  

输出：

删除行：

更新行：