This example works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var data = [
{"id":1,"opcje":"opcje1","wydzial_dzial":"wydzial_dzial1"},
{"id":2,"opcje":"opcje2","wydzial_dzial":"wydzial_dzial2"},
{"id":3,"opcje":"opcje3","wydzial_dzial":"wydzial_dzial3"},
{"id":4,"opcje":"opcje4","wydzial_dzial":"wydzial_dzial4"},
{"id":5,"opcje":"opcje5","wydzial_dzial":"wydzial_dzial5"}
]
$(function () {
$('#example').datagrid({
// url: 'example.php',
data: data,
columns: [[
{
field: 'opcje', title: 'Opcje', width: '60px', align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
const s = '<a href="javascript:void(0)" onclick="exampleSave(' + row.id + ')"><i class="fa-solid fa-floppy-disk fa-xl" style="color:black;"></i></a> ';
const c = '<a href="javascript:void(0)" onclick="exampleCancel(' + row.id + ')"><i class="fa-solid fa-rotate-left fa-xl" style="color:black;"></i></a>';
return s + c;
} else {
return '<a href="javascript:void(0)" onclick="exampleEdit(' + row.id + ')"><i class="fa-solid fa-pen-to-square fa-xl" style="color:black;"></i></a>';
}
}
},
{ field: 'wydzial_dzial', title: 'Koszty osobowe', width: '200px', halign: 'center' },
{ field: 'stawka', title: 'Stawka godz. [PLN]', width: '120px', halign: 'center', align: 'right', editor: { type: 'numberbox', options: { min: 0, precision: 0, decimalSeparator: ',' } } },
{ field: 'stawka_0', title: 'Stawka godz. + ogolnozakładowa [PLN]', width: '120px', halign: 'center', align: 'right' },
{ field: 'stawka_narzut', title: 'Stawka narzut [PLN]', width: '120px', halign: 'center', align: 'right' },
]],
idField: 'id',
rownumbers: true,
singleSelect: true,
onBeforeEdit: function (index, row) {
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
}
});
})
</script>
</head>
<body>
<table id="example" style="width:700px;height:250px" data-options="singleSelect:true"></table>
</body>
</html>
