EasyUI DataGrid 单元格合并（或者说一条数据拆分成多条）

碰到一需求，需要datagrid一行中某个字段的内容拆分多行显示

想到笨方法是仍然请求固定条数（easyui的分页条数）的数据

在后台根据需要拆分的字段拆分成多条，前台加载后其他字段再进行单元格合并

原先是这样子：



实际上有些情况必须这样显示：



后台得到的数据是一个List<Map<String,Object>>（用ListA表示，size()即前端easyui请求的内容条数），每个Map（用MapA表示）包含一个List<Map<String,Object>>（List用ListB表示，Map用MapB表示）

MapA中包含了表格中除订单内容以外的数据

MapB中包含了订单内容、条码等元素

原先是将ListB中所有的MapB的订单内容取出来组合在一起，即每条数据是：

MapA.put("订单内容"，"ListB中所有MapB的订单内容集合")

现在是要ListB中的MapB先根据条码分类，相同条码的订单内容放一起，假设ListB中的MapB共有A、B、C三种条码，即每条数据为：

MapA.put("订单内容"，"ListB中条码为A的MapB的订单内容集合")

MapA.put("订单内容"，"ListB中条码为B的MapB的订单内容集合")

MapA.put("订单内容"，"ListB中条码为C的MapB的订单内容集合")

也就是一条拆成三条，但为了保证页面中记录数与请求的记录数一致，要在加载完成后对除订单内容以外的列进行合并

以下是后端数据转换代码：

List<Map<String, Object> > listA = (List<Map<String, Object> >)rs.getData();//请求到的数据
List<Map<String, Object> > newList = new ArrayList<Map<String, Object> >(); //要放到前端的数据
for ( int i = 0; i < listA.size(); i++ )
{
List<Map<String, Object> > listB = (List<Map<String, Object> >)listA.get( i ).get( "Order" );
List<List<String> > orderContentsList = new ArrayList<List<String> >();//用来存放订单内容集合的集合
//将条码相同的订单内容放在一个集合里，再将所有集合放在一个新的集合里
while ( listB.size() > 0 )
{
List<String> orderContentList = new ArrayList<String>(); 订单集 合
String str1 = (String) listB.get( 0 ).get( "BarCode" );//需要对比的字段
orderContentList.add( (String) listB.get( 0 ).get( "Content" ) );//订单内容字段
listB.remove( 0 );
if ( listB.size() == 0 )
{
orderContentsList.add( orderContentList );
}
for ( int k = 0; k < listB.size(); k++ )
{
String str2 = (String) listB.get( k ).get( "BarCode" );
if ( str1.equals( str2 ) )
{
orderContentList.add( (String) ListB.get( k ).get( "Content" ) );
listB.remove( k );
k--;
}
if ( k == listB.size() - 1 )
{
orderContentsList.add( orderContentList );
}
}
}

//遍历orderContentsList，每个订单内容集合遍历拼接成字符串,复制listA中的元素，将内容put进去，放在新集合中
//此处listA中取出的元素必须复制，不然所有操作指向同一个对象，就是后面put进去的订单内容会覆盖前面的内容
for ( int j = 0; j < orderContentsList.size(); j++ )
{
String str = "";
List<String> orderContentList = ordersList.get( j );
for ( int k = 0; k < orderContentList.size(); k++ )
{
str = str + orderContentList.get( k ) + ",";
}
str = str.substring( 0, str.length() - 1 );
Map<String, Object> map	= listA.get( i );
Map<String, Object> copyMap = new HashMap<String, Object>();
copyMap.putAll( map );
copyMap.put( "content", str );
newList.add( copyMap );
}
}

以下是前端代码：

$('#dg').datagrid({
columns: [
[
//自定义序列号，自带的那个...没有列名，丑爆，也方便根据field取得元素赋值
{
field: 'index',
title: '序号',
width: 40,
align: 'center',
formatter: function (val, row, index) {
var options = $("#dg").datagrid('getPager').data("pagination").options;
var currentPage = options.pageNumber;
var pageSize = options.pageSize;
return (pageSize * (currentPage - 1)) + (index + 1);
}
}, {
field: 'ApplyCode',
title: '订单号',
width: 90,
align: 'center'
}, {
field: 'InstituteName',
title: '院所名称',
width: 120,
align: 'center'
}
}
]],
onLoadSuccess: function () {
//需要合并的字段集合
 var fields = ['ApplyCode',  'InstituteName',  'Sex', 'Age', 'CreateDateTime', 'index'];
merge($("#dg"), fields);
}
});

合并单元格：

var merge = function(datagrid, fields) {
var rowcounts = datagrid.datagrid("getRows").length;//获得数据条数
var a = 1;
var b = 1;
var arr = new Array();
var field = fields[0];//根据第一个字段进行合并
//遍历该字段的每行数据，判断重复情况
for (var i = 0; i < rowcounts - 1; i++) {
var x = datagrid.datagrid("getRows")[i][field];
var y = datagrid.datagrid("getRows")[i + 1][field]
if (x == y) {
if (b == 1) {
arr.push(i);
}
a++;
b++;
if (i == rowcounts - 2) {
arr.push(a);
}
} else {
if (a > 1) {
arr.push(a);
}
a = 1;
b = 1;
}
}
var arr2 = toArr(arr, rowcounts);
if (arr.length != 0) {
var options = datagrid.datagrid('getPager').data("pagination").options;
var curr = options.pageNumber;//取得当前页码
var pageSize=options.pageSize;
 //根据页码对序号赋值
for (var i = 0; i < arr2.length; i++) {
var page = (curr - 1) * pageSize + arr2[i];
//根据field属性获得单元格内容并赋值
$($("td[field=index]")[i + 1]).find('div').eq(0).html(page);
}
}
//根据arr数组对需要合并的列进行合并
for (var j = 0; j < fields.length; j++) {
var field = fields[j];
for (var i = 0; i < arr.length; i += 2) {
datagrid.datagrid('mergeCells', {
index: arr[i],
field: field,
rowspan: arr[i + 1]
});
}
}

}
var toArr = function(arr, length) {
var arr2 = new Array();
var x = true;
for (var j = 0; j < arr.length - 1; j += 2) {
if (arr[j] == 0) {
for (var k = 0; k < arr[j + 1]; k++) {
arr2.push(1);
}
} else {
if (!x) {
for (var k = 0; k < arr[j] - arr[j - 2] - arr[j - 1]; k++) {
var l = arr2[arr2.length - 1];
l++;
arr2.push(l);
}
}
if (x) {
for (var k = 1; k < arr[j] + 1; k++) {
arr2.push(k);
}
}
var xx = arr2[arr2.length - 1] + 1;
for (var k = 0; k < arr[j + 1]; k++) {
arr2.push(xx);
}
}
x = false;

}
if (arr2.length < length) {
var xx = arr2[arr2.length - 1] + 1;
var size = arr2.length;
for (var i = 0; i < length - size; i++) {
arr2.push(xx++);
}
}
return arr2;
}