How to edit rows in datagrid using jQuery EasyUI Mobile ?
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:
Please Login to comment...