Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to edit rows in datagrid using jQuery EasyUI Mobile ?

  • Last Updated : 14 Dec, 2020

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn to edit rows of Datagrid using jQuery EasyUI Mobile plugin.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Downloads for EasyUI for jQuery:

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

Example 1: The following example demonstrates the basic datagrid using jQuery EasyUI Mobile.



html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
  
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
  
    <!--jQuery libraries of EasyUI Mobile-->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
    <table id="tableID" data-options="header:'#headerID',
                        singleSelect:true,border:false,
                        fit:true,fitColumns:true,
                        scrollbarSize:0">
        <thead>
            <tr>
                <th data-options="field:'studentid',width:80">
                    Student ID
                </th>
                <th data-options="field:'studentname',
                    width:100">
                    Student Name
                </th>
                <th data-options="field:'age',
                    width:80,align:'center'">
                    Age
                </th>
                <th data-options="field:'marksscored',
                    width:80,align:'center'">
                    Marks Scored
                </th>
            </tr>
        </thead>
    </table>
  
    <div id="headerID">
        <div class="m-toolbar">
            <div class="m-title">
                Basic DataGrid
            </div>
        </div>
    </div>
  
    <script>
        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
            });
        });
    </script>
</body>
  
</html>

Output: 
 

 

Example 2: The following example demonstrates editing and deleting of row in the datagrid based on the index of any row.

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
            maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
          
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI Mobile-->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
  
</head>
  
<body>
    <table id="tableID" 
        data-options="
            header: '#headerID',
            singleSelect: true,
            border: false,
            fit: true,
            fitColumns: true,
            scrollbarSize: 0,
            iconCls: 'icon-edit',
            border: false,
            scrollbarSize: 0,
            data: data,
            onClickRow: onClickRow">
  
        <thead>
            <tr>
                <th data-options="
                    field: 'studentid',
                    width: 80">
                    Student ID
                </th>
  
                <!--editor:textbox is used for 
                    editing this field-->
                <th data-options="
                    field:' studentname',
                    width: 100,
                    editor: 'textbox'">
                    Student Name
                </th>
  
                <!--editor:numberbox is used 
                    for editing this field-->
                <th data-options="
                    field: 'age', width: 80,
                    align: 'center',
                    editor: 'numberbox'">
                    Age
                </th>
  
                <th data-options="
                    field: 'marksscored',
                    width: 80,
                    align: 'center',
                    editor: {
                        type: 'numberbox',
                        options: {precision:1}
                    }">
                    Marks Scored
                </th>
            </tr>
        </thead>
    </table>
  
    <div id="headerID">
        <div class="m-toolbar">
            <div class="m-title">
                Edit DataGrid
            </div>
  
            <div class="m-right">
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton" 
                    data-options=
                    "iconCls: 'icon-remove', plain: true"
                    onclick="remove()">
                </a>
  
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton" 
                    data-options=
                    "iconCls: 'icon-save', plain: true"
                    onclick="save()">
                </a>
            </div>
        </div>
    </div>
  
    <script>
        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');
            }
        }
    </script>
</body>
  
</html>

Output: 
 

Delete row: 

Update row: 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!