Please refer to the SubGrid example.
https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Nested%20SubGrid&sort=asc<!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/material-blue/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" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript">
var conf = {
options: {
fitColumns: true,
showHeader: false,
columns: [[
{field:'group',width:100}
]],
data: [
{group:'General Ledger'}
]
},
subgrid: {
options: {
fitColumns: true,
showHeader: false,
scrollbarSize: 0,
columns: [[
{field:'header',width:100}
]],
data: [
{header:'Accounts'},
{header:'Journals'}
]
},
subgrid: {
options: {
fitColumns: true,
showHeader: false,
scrollbarSize: 0,
foreignField: 'header',
columns: [[
{field:'item',width:100}
]],
data: [
{item:'View Accounts',header:'Accounts',width:100},
{item:'Add Accounts',header:'Accounts',width:100},
{item:'Edit Accounts',header:'Accounts',width:100},
{item:'Disable Accounts',header:'Accounts',width:100},
{item:'View Journals',header:'Journals',width:100},
{item:'Add Journals',header:'Journals',width:100}
],
loadFilter: function(data){
var opts = $(this).datagrid('options');
var fvalue = opts.queryParams[opts.foreignField];
var rows = [];
for(var i=0; i<data.length; i++){
if (data[i][opts.foreignField] == fvalue) {
rows.push(data[i])
}
}
return rows;
}
}
}
}
}
$(function(){
$('#dg').datagrid({
width: 300,
height: 500
}).datagrid('subgrid', conf)
})
</script>
</head>
<body>
<table id='dg'></table>
</body>
</html>
