jqgrid合并单元格，合并行、合并列

Wilma ·

更新时间:2024-11-10

· 954 次阅读

jqgrid合并行、合并列

先看示例图片最终效果：
jqgrid合并单元格 .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; }

模拟的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代码：

// jqgrid表格配置
$('#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 = rows.length) {
    startRowIndex = rows.length - 1
  }
  // 获取合并单元格的开始行
  var currentRows = rows[startRowIndex]
  // 由于jqgrid渲染表格时会在tbody中自动生成一个隐藏的tr在第一行，所以这里获取元素的时候需要加 1
  var currentTr = $('#' + gridName + '')
    .find('tr')
    .eq(startRowIndex + 1)
  // 获取 开始列 相对于父元素tr中的索引位置  这里不需要加 1 因为是直接根据id来选择的
  var currentTdIndex = $('td[id=' + cellName + currentRows + ']').index()
  // 判断传入的合并数值是否超出单元格的个数，如果超出的话设置为最大合并数
  if (currentTdIndex + num >= currentTr.find('td').length) {
    num = currentTr.find('td').length - currentTdIndex
  }
  // 初始化colspan的值
  var mergeNum = 1
  for (var i = 0, len = rows.length; i  currentTdIndex) {
      // 当索引大于等于 (currentTdIndex + num) 的值说明已经达到了合并列的限制数 则跳出循环
      if (i >= currentTdIndex + num) {
        break
      }
      mergeNum++
      $('#' + gridName + '').setCell(currentRows, cellName, '', { color: 'red' }, { colspan: mergeNum })
      $('#' + gridName + '').setCell(currentRows, i + 1, '', { display: 'none' })
    }
  }
}

作者：Jing.Yao

单元并行 jqgrid 单元格

1024 个赞