这里示例用的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">
<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>
<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')
* @MethodAuthor: Yao
* @MethodDescription: jqgrid合并行
* @param {String} gridName jqgrid表格元素的id
* @param {String} CellName 需要合并的列字段名
* @return {*} *
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,
* @MethodAuthor: Yao
* @MethodDescription: 合并列
* @param {*} gridName jqgrid表格元素的id
* @param {*} CellName 从哪一列开始
* @param {*} startRowIndex 从哪一行开始
* @param {*} num 合并几个
* @return {*} *
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' })
复制代码
