<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 创建子网格示例</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 EasyUI 样式和脚本文件 -->
<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.easyui.min.js"></script>
</head>
<body>
<!-- 创建 EasyUI Datagrid -->
<table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
url="your_data_url"
pagination="true"
rownumbers="true"
fitColumns="true">
<thead>
<tr>
<!-- 列定义 -->
<th field="name" width="100">名称</th>
<th field="price" width="100" align="right">价格</th>
<th field="quantity" width="100" align="right">数量</th>
</tr>
</thead>
</table>
<!-- JavaScript 部分 -->
<script type="text/javascript">
// JavaScript 代码
$(function(){
$('#datagrid').datagrid({
// 其他配置...
// 创建子网格
subgrid: true,
subgridOptions: {
// 子网格的配置
url: 'your_subgrid_data_url',
columns: [
{ field: 'subName', title: '子名称', width: 100 },
{ field: 'subPrice', title: '子价格', width: 100, align: 'right' },
{ field: 'subQuantity', title: '子数量', width: 100, align: 'right' }
// 添加更多子网格的列...
],
singleSelect: true,
fitColumns: true
},
onExpandRow: function(index, row){
// 在这里处理展开行时的逻辑
}
});
});
</script>
</body>
</html>
在上述代码中，通过设置 subgrid 为 true，并配置 subgridOptions 来定义子网格的配置。在子网格的配置中，你可以设置子网格的数据源 url、列定义 columns，以及其他属性。
确保替换 "your_data_url" 和 "your_subgrid_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。在这个例子中，我简单地使用了一个子网格的示例，你可以根据实际需求修改为其他子网格的配置。在 onExpandRow 函数中，你可以处理展开行时的逻辑。
转载请注明出处：http://www.pingtaimeng.com/article/detail/13125/jQuery EasyUI