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

最新推荐文章于 2022-02-11 17:28:06 发布

只会div

最新推荐文章于 2022-02-11 17:28:06 发布

阅读量4.3k

点赞数 6

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45612438/article/details/105370348

版权

这篇博客介绍了如何在jqgrid中实现行和列的合并。内容包括展示最终效果的示例图片，强调在不同数据加载方式下合并方法的调用位置，以及配置项中特定代码的添加。此外，还提及了jqgrid的setcell方法，并提供了jqgrid官方文档的链接，以及HTML和模拟JSON数据的示例代码。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

只会div

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
jqgrid合并单元格，合并行、合并列

jqgrid合并行、合并列先看示例图片最终效果：注意事项：这里示例用的jqgrid表格是加载的本地数据如果用的不是加载本地数据的方法，需要把合并行和列的方法放在gridComplete: function(a, b, c) {...}加载事件函数里边调用需要合并的单元格要在配置项中加上以下代码配置（示例）：{ name: 'name', align: 'center',...
复制链接

扫一扫

专栏目录