关于datagrid 复杂报表
现在想用 easyui 的datagrid实现 类似这样的报表 可以实现吗？有没有参考的例子 感谢大家
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI Datagrid Mergerows Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
#myDatagrid {
height: 500px;
}
.merged-row {
height: 30px;
line-height: 30px;
font-weight: bold;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table id="myDatagrid">
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">Name</th>
<th rowspan="2">Age</th>
<th rowspan="2">Gender</th>
<th colspan="4">Address</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Alice</td>
<td>Smith</td>
<td>20</td>
<td>Female</td>
<td rowspan="2">123 Main St., Anytown USA</td>
<td rowspan="2">Anytown</td>
<td rowspan="2">CA</td>
<td rowspan="2">90210</td>
</tr>
<tr>
<td>Bob</td>
<td>Johnson</td>
<td>22</td>
<td>Male</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>Carol</td>
<td>Williams</td>
<td>25</td>
<td>Female</td>
<td>456 Maple Rd., Othertown USA</td>
<td>Othertown</td>
<td>NY</td>
<td>11235</td>
</tr>
<tr>
<td>David</td>
<td>Davis</td>
<td>27</td>
<td>Male</td>
<td rowspan="2">789 Elm St., Anothercity USA</td>
<td rowspan="2">Anothercity</td>
<td rowspan="2">TX</td>
<td rowspan="2">76051</td>
</tr>
<tr>
<td>Emily</td>
<td>Jones</td>
<td>23</td>
<td>Female</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
$('#myDatagrid').datagrid({
onLoadSuccess: function (data) {
mergeRows('myDatagrid', 0, ['ID']);
}
});
// Merge rows based on column names
function mergeRows(datagridId, startIndex, fieldNames) {
var datagrid = $('#' + datagridId);
var rows = datagrid.datagrid('getRows');
var mergeCells = [];
var fieldName;
var rowspan;
var i;
var j;
var curFieldValue;
var nextFieldValue;
var thisRow;
var nextRow;
var skipRows = 0;
var rowSpanIndex;
for (i = startIndex; i < rows.length; i++) {
thisRow = rows[i];
nextRow = (i + 1 < rows.length) ? rows[i + 1] : {};
for (j = 0; j < fieldNames.length; j++) {
fieldName = fieldNames[j];
if (skipRows > 0) {
mergeCells.push({ index: i, field: fieldName, rowspan: rowspan });
if (j === fieldNames.length - 1) {
skipRows--;
}
continue;
}
curFieldValue = thisRow[fieldName];
nextFieldValue = nextRow[fieldName];
if (curFieldValue !== nextFieldValue) {
mergeCells.push({ index: i, field: fieldName, rowspan: 1 });
} else {
rowSpanIndex = mergeCells.findIndex(function (elem) {
return elem.index === i - 1 && elem.field === fieldName;
});
if (rowSpanIndex !== -1) {
rowspan = mergeCells[rowSpanIndex].rowspan + 1;
mergeCells[rowSpanIndex].rowspan = rowspan;
skipRows = rowspan - 1;
if (j === fieldNames.length - 1) {
skipRows--;
}
} else {
mergeCells.push({ index: i, field: fieldName, rowspan: 2 });
}
}
}
}
datagrid.datagrid('mergeCells', {
index: mergeCells[0].index,
field: mergeCells[0].field,
rowspan: mergeCells[0].rowspan
});
for (i = 1; i < mergeCells.length; i++) {
rowIndex = mergeCells[i].index;
fieldName = mergeCells[i].field;
rowspan = mergeCells[i].rowspan;
if (rowspan > 1) {
datagrid.datagrid('mergeCells', {
index: rowIndex,
field: fieldName,
rowspan: rowspan
});
for (j = rowIndex + 1; j < rowIndex + rowspan; j++) {
var tr = datagrid.datagrid('getRowDom', j);
tr.addClass('merged-row');
}
}
}
}
});
</script>
</body>
</html>
在上述代码中，我们首先引入了 EasyUI 相关的 CSS 和 JavaScript 文件，在页面中定义了一个包含多行和多列的复杂表格，其中一些行和列需要进行单元格合并。我们使用了 rowspan 和 colspan 属性来指定需要合并的单元格。在实际应用中，这些数据应该是通过 JavaScript 代码动态生成而来。
然后，我们使用 EasyUI 的 datagrid 组件来渲染这个表格，并在 onLoadSuccess 事件触发后调用 mergeRows 函数，实现单元格的合并操作。
mergeRows 函数的实现非常复杂，主要功能是基于某个或多个列名，动态地合并单元格。首先，我们使用 EasyUI 提供的 API 获取所有行数据，并准备好一个空数组 mergeCells 用于存储合并单元格的信息。然后，针对每一列，我们通过逐行比较来判断单元格是否需要合并。如果需要合并，则将相邻单元格的行数进行累加。如果不需要合并，则将当前单元格作为一个新的合并单元格进行存储。
最后，我们使用 EasyUI 提供的 mergeCells 方法，遍历 mergeCells 数组，依次合并单元格。注意，在对单元格进行合并时，我们使用了 addClass 方法为合并后的单元格添加 merged-row 类，以便为合并后的单元格设置样式。
通过上述代码，我们就可以在 HTML 页面中使用 EasyUI 的 datagrid 实现合并单元格的复杂表格。需要注意的是，在实际应用中，我们应该根据实际需要进行样式的调整，以便更好地展示数据。
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/392626
- 你也可以参考下这篇文章：easyui的datagrid在使用分页条的时候，乱码
- 除此之外, 这篇博客: Datagrid组件的基本讲解中的 1.datagrid的基本属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- datagrid—- 一种接收后台数据用于，以标准表单的形式展示的组件。
- EasyUI 接收两种参数：对象参数；数组参数。
url：数据请求后台的地址。 title:表单的标题。 iconCls:图标。 pagination:分页工具条。 pageSize：15。 pageList：[15,30,45,60],默认是以10为标准显示的。 fit：true--datagird的宽高自适应。 fitColumns：底层滚动条。左右拉升（是否要求自适应），默认false，列少的时候给true，列多的时候给false。 nowarp：true/false 给true某一行展示所有的内容信息。折行？ border--边框。 idField--标识。后台返回的数据的标识（ifField的标识和后台传过来的字段之一相同），需求：跨页删除、记住所有选中的，类似于数据库中的主键。 columns--列，easyUi支持多级表头。 一列一个对象，需要多少个就加多少个对象。 title：列的名称 field：后台返回的前台json对应的key，必须一一对应，不然datagrid找不到 width：100 列的宽度。最好大于50 datagrid翻页细节， 默认回传两个参数：page，rows，第page页，一个多少rows条，显示的总记录数和json的total有关- 您还可以看一下 赖国荣老师的EasyUI应用（项目实战）课程中的 【赖国荣】Easyui从入门到精通第1讲：用datagrid实现显示学生资料列表和分页功能小节, 巩固相关知识点