Please refer to this example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid - 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">
<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 type="text/javascript">
var data = {"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
]}
function formatAction(value,row,index){
return '<a href="javascript:void(0)" onclick="editrow('+index+')">Edit</a>';
}
function editrow(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit');
if (row.itemid == 'EST-1'){
$('#fm').empty().html(`
<div style="margin-bottom:10px">
<input name="itemid" class="easyui-textbox" required="true" label="Item ID:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="productid" class="easyui-textbox" required="true" label="Product:" style="width:100%">
</div>
`);
} else {
$('#fm').empty().html(`
<div style="margin-bottom:10px">
<input name="unitcost" class="easyui-numberspinner" precision="2" required="true" label="Unit Cost:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="attr1" class="easyui-textbox" required="true" label="Attribute:" style="width:100%">
</div>
`);
}
$.parser.parse('#fm');
$('#fm').form('load',row);
}
}
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid" title="DataGrid" style="width:750px;height:250px"
data-options="singleSelect:true,data:data">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
<th data-options="field:'action',width:80,align:'center',formatter:formatAction">Action</th>
</tr>
</thead>
</table>
<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
</body>
</html>
