Skip to content
Related Articles

Related Articles

Improve 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.

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: 

 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :