Please refer to this example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.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" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script>
var data = [
{ "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-2" },
{ "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-3" },
{ "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Green Adult", "itemid": "EST-5" },
{ "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 58.50, "attr1": "Tailless", "itemid": "EST-6" },
{ "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "With tail", "itemid": "EST-7" },
{ "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Female", "itemid": "EST-8" },
{ "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Male", "itemid": "EST-9" },
{ "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Rattleless", "itemid": "EST-4" },
{ "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 193.50, "attr1": "Adult Male", "itemid": "EST-10" }
];
var detailData = [{ "orderid": "1004", "linenum": "2", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1013", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1014", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }]
$(function () {
$('#dg').datagrid({
title: 'DataGrid - DetailView',
width: 800,
height: 350,
singleSelect: true,
nowrap: false,
fitColumns: true,
data: data,
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 100, sortable: true },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
{ field: 'attr1', title: 'Attribute', width: 150, sortable: true },
{ field: 'status', title: 'Status', width: 60, align: 'center' }
]],
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
ddv.edatagrid({
singleSelect:true,
rownumbers:true,
columns: [[
{ field: 'orderid', title: 'Order ID', width: 200,editor:'textbox' },
{ field: 'quantity', title: 'Quantity', width: 100, align: 'right',editor:'numberbox' },
{ field: 'unitprice', title: 'Unit Price', width: 100, align: 'right',editor:'numberbox' }
]],
data:detailData
})
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>