HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Editable function recently added to the data grid (datagrid) of. It allows the user to add a new row to the data grid (datagrid). Users can also update one or more rows.
This tutorial shows you how to create a data grid (datagrid) and inline editor.
$ (Function () { $ ( '# Tt'). Datagrid ({ title: 'Editable DataGrid', iconCls: 'icon-edit', width: 660, height: 250, singleSelect: true, idField: 'itemid', url: 'datagrid_data.json', columns: [[ {Field: 'itemid', title: 'Item ID', width: 60}, {Field: 'productid', title: 'Product', width: 100, formatter: function (value) { for (var i = 0; i <products.length; i ++) { if (products [i] .productid == value) return products [i] .name; } return value; }, editor: { type: 'combobox', options: { valueField: 'productid', textField: 'name', data: products, required: true } } }, {Field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: {type: 'numberbox', options: {precision: 1}}}, {Field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox'}, {Field: 'attr1', title: 'Attribute', width: 150, editor: 'text'}, {Field: 'status', title: 'Status', width: 50, align: 'center', editor: { type: 'checkbox', options: { on: 'P', off: '' } } }, {Field: 'action', title: 'Action', width: 70, align: 'center', formatter: function (value, row, index) { if (row.editing) { var s = '<a href="#" onclick="saverow(this)"> Save </a>'; var c = '<a href="#" onclick="cancelrow(this)"> Cancel </a>'; return s + c; } Else { var e = '<a href="#" onclick="editrow(this)"> Edit </a>'; var d = '<a href="#" onclick="deleterow(this)"> Delete </a>'; return e + d; } } } ]], onBeforeEdit: function (index, row) { row.editing = true; updateActions (index); }, onAfterEdit: function (index, row) { row.editing = false; updateActions (index); }, onCancelEdit: function (index, row) { row.editing = false; updateActions (index); } }); }); function updateActions (index) { $ ( '# Tt'). Datagrid ( 'updateRow', { index: index, row: {} }); }
To enable inline editing data grid, you should add a property to the editor column. Editor (editor) tells Data Grid (datagrid) How to edit the field and how to save the field value. As you can see, three editors (editor) We define: text, combobox and checkbox.
function getRowIndex (target) { var tr = $ (target) .closest ( 'tr.datagrid-row'); return parseInt (tr.attr ( 'datagrid-row-index')); } function editrow (target) { $ ( '# Tt') datagrid ( 'beginEdit', getRowIndex (target)).; } function deleterow (target) { $ .messager.confirm ( 'Confirm', 'Are you sure?', Function (r) { if (r) { $ ( '# Tt') datagrid ( 'deleteRow', getRowIndex (target)).; } }); } function saverow (target) { $ ( '# Tt') datagrid ( 'endEdit', getRowIndex (target)).; } function cancelrow (target) { $ ( '# Tt') datagrid ( 'cancelEdit', getRowIndex (target)).; }