jqgrid合并行、合并列
先看示例图片最终效果:
注意事项:
这里示例用的jqgrid表格是加载的本地数据
如果用的不是加载本地数据的方法,需要把合并行和列的方法放在gridComplete: function(a, b, c) {...}
加载事件函数里边调用
需要合并的单元格要在配置项中加上以下代码配置(示例):
{
name: 'name',
align: 'center',
// 加上这个配置来设置单元格属性 id
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