Как редактировать строки в сетке данных с помощью jQuery EasyUI Mobile?
Опубликовано: 5 Января, 2022
EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков.
В этой статье мы научимся редактировать строки Datagrid с помощью плагина jQuery EasyUI Mobile.
Загрузки EasyUI для jQuery:
https://www.jeasyui.com/download/index.php
Пример 1. В следующем примере демонстрируется базовая сетка данных с использованием 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 > |
Выход:
Пример 2: В следующем примере демонстрируется редактирование и удаление строки в сетке данных на основе индекса любой строки.
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 > |
Выход:
Удалить строку:
Обновить строку:
