jqgrid合并单元格，合并行、合并列
jqgrid合并行、合并列
先看示例图片最终效果：
注意事项：
这里示例用的jqgrid表格是加载的本地数据
如果用的不是加载本地数据的方法，需要把合并行和列的方法放在gridComplete: function(a, b, c) {...}加载事件函数里边调用
需要合并的单元格要在配置项中加上以下代码配置（示例）：
{name: 'name',align: 'center',// 加上这个配置来设置单元格属性 idcellattr: 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代码：
<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代码：
// 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.lengthfor (var i = 0; i < length; i++) {//从上到下获取一条信息var before = $('#' + gridName + '').jqGrid('getRowData', rows[i])var rowSpanTaxCount = 1for (j = i + 1; j <= length; j++) {//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏var end = $('#' + gridName + '').jqGrid('getRowData', rows[j])if (before[cellName] == end[cellName]) {rowSpanTaxCount++// 设置单元格隐藏$('#' + gridName + '').setCell(rows[j], cellName, '', {display: 'none',})} else {rowSpanTaxCount = 1break}// 设置单元格的rowspan// 这里的需要用上层for循环的索引 i$('#' + 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]// 由于jqgrid渲染表格时会在tbody中自动生成一个隐藏的tr在第一行，所以这里获取元素的时候需要加 1var 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 = 1for (var i = 0, len = rows.length; i < len; i++) {// 当索引大于开始列的索引时开始计算需要合并的colspan的值if (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' })}}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！