jqgrid合并行、合并列
先看示例图片最终效果：
注意事项：
这里示例用的jqgrid表格是加载的本地数据
如果用的不是加载本地数据的方法，需要把合并行和列的方法放在gridComplete: function(a, b, c) {...}加载事件函数里边调用
需要合并的单元格要在配置项中加上以下代码配置（示例）：
{
name: 'name',
align: 'center',
cellattr: function(rowId, tv, rawObject, cm, rdata) {
return "id='name" + rowId + "'"
},
},
代码中还用到了jqgrid的setcell方法：
这里引用一下jqgrid文档中的说明，附 jqgrid文档地址
| 方法名 | 参数 | 返回值 | 说明 |
|---|
| setCell | rowid,colname, data, class, properties | jqGrid对象 | 改变单元格的值。rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更 新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性 |
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jqgrid合并单元格</title>
<link rel="stylesheet" href="./jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" href="./jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css">
<style>
.jqgrid {
width: 80%;
margin: 0 auto;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 2px solid #e2e2e2;
}
</style>
</head>
<body>
<div class="jqgrid">
<table id="gridTable"></table>
<div id="gridTablePager"></div>
</div>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./jqgrid/js/jquery.jqGrid.src.js"></script>
<script src="./jqgrid/js/i18n/grid.locale-cn.js"></script>
</body>
</html>
模拟的json数据：
var jsonData = [
{
id: 'F70741C4EA5932',
name: 'HTML',
book: '《精通HTML》',
author: '（英）波恩（Hanine，P.）',
tops: '12',
},
{
id: '14CFF86267835A3',
name: 'HTML',
book: '《深入浅出html》',
author: 'Elisabeth Freeman',
tops: '13',
},
{
id: '10F996AC54BA25A',
name: 'HTML',
book: '《HTML5程序设计(第2版)》',
author: '[荷] Peter Lubbers / [美] Brian Albers / [美] Frank Salim',
tops: '14',
},
{
id: '8A5935CE5F99A',
name: 'CSS',
zytz: 0,
book: '《CSS权威指南》',
author: '美 Eric A.Meyer',
tops: '11',
},
{
id: '8a82FF86267835A3D55D74',
name: 'CSS',
book: '《CSS世界》',
author: '张鑫旭',
tops: '10',
},
{
id: '592B3B34DB6A25A',
name: 'CSS',
zytz: 0,
book: '《CSS设计指南》',
author: 'Charles Wyke-Smit',
tops: '9',
},
{
id: '8a829cF99A',
name: 'JavaScript',
book: '《JS高级程序设计》',
author: '(美)(Nicholas C.Zakas)扎卡斯',
tops: '8',
},
{
id: 'D7468CAE66F4D',
name: 'JavaScript',
book: '《JS权威指南》',
author: '(美)弗拉纳根',
tops: '7',
},
{
id: '66F4D01B59',
name: 'JavaScript',
book: '《JavaScript DOM编程艺术》',
author: '(英)(Jeremy Keith)',
tops: '6',
},
]
JS代码：
$('#gridTable').jqGrid({
datatype: 'local',
autowidth: true,
autoheight: true,
rowNum: 1000000,
altRows: true,
rownumbers: true,
rownumWidth: 50,
pager: '#gridTablePager',
colNames: ['ID', '类别', '书籍', '作者', 'm'],
colModel: [
{
name: 'id',
hidden: true,
},
{
name: 'name',
align: 'center',
sortable: false,
cellattr: function(rowId, tv, rawObject, cm, rdata) {
return "id='name" + rowId + "'"
},
},
{
name: 'book',
align: 'center',
sortable: false,
cellattr: function(rowId, tv, rawObject, cm, rdata) {
return "id='book" + rowId + "'"
},
},
{
name: 'author',
align: 'center',
sortable: false,
cellattr: function(rowId, tv, rawObject, cm, rdata) {
return "id='author" + rowId + "'"
},
},
{
name: 'tops',
align: 'center',
sortable: false,
},
],
gridComplete: function(a, b, c) {
$('#gridTable').jqGrid('setLabel', 'rn', '序号', {
'text-align': 'center',
'vertical-align': 'middle',
width: '50',
})
},
loadComplete: function(a, b, c) {},
})
var localData = {}
var reader = {
root: function(obj) {
return localData.rows
},
page: function(obj) {
return localData.page
},
total: function(obj) {
return localData.total
},
records: function(obj) {
return localData.records
},
repeatitems: false,
}
localData = {
page: 1,
total: 0,
records: '0',
rows: jsonData,
}
localData.rows = jsonData
localData.records = jsonData.length
localData.total = jsonData.length % 5 == 0 ? jsonData.length / 5 : Math.floor(jsonData.length / 5) + 1
$('#gridTable')
.setGridParam({
data: localData.rows,
reader: reader,
gridComplete: function(a, b, c) {
MergeGridRows('gridTable', 'name')
MergeTableColumn('gridTable', 'book', 2, 2)
MergeTableColumn('gridTable', 'author', 10, 4)
},
})
.trigger('reloadGrid')
function MergeGridRows(gridName, cellName) {
var rows = $('#' + gridName + '').getDataIDs()
var length = rows.length
for (var i = 0; i < length; i++) {
var before = $('#' + gridName + '').jqGrid('getRowData', rows[i])
var rowSpanTaxCount = 1
for (j = i + 1; j <= length; j++) {
var end = $('#' + gridName + '').jqGrid('getRowData', rows[j])
if (before[cellName] == end[cellName]) {
rowSpanTaxCount++
$('#' + gridName + '').setCell(rows[j], cellName, '', {
display: 'none',
})
} else {
rowSpanTaxCount = 1
break
}
$('#' + gridName + '').setCell(
rows[i],
cellName,
'',
{ color: 'red' },
{
rowspan: rowSpanTaxCount,
}
)
}
}
}
function MergeTableColumn(gridName, cellName, startRowIndex, num) {
var rows = $('#' + gridName + '').getDataIDs()
if (startRowIndex >= rows.length) {
startRowIndex = rows.length - 1
}
var currentRows = rows[startRowIndex]
var currentTr = $('#' + gridName + '')
.find('tr')
.eq(startRowIndex + 1)
var currentTdIndex = $('td[id=' + cellName + currentRows + ']').index()
if (currentTdIndex + num >= currentTr.find('td').length) {
num = currentTr.find('td').length - currentTdIndex
}
var mergeNum = 1
for (var i = 0, len = rows.length; i < len; i++) {
if (i > currentTdIndex) {
if (i >= currentTdIndex + num) {
break
}
mergeNum++
$('#' + gridName + '').setCell(currentRows, cellName, '', { color: 'red' }, { colspan: mergeNum })
$('#' + gridName + '').setCell(currentRows, i + 1, '', { display: 'none' })
}
}
}
代码
