如何使用jqgrid渲染带有两个表头的表？

<link rel="stylesheet" href="path/to/jquery-ui.css">
<link rel="stylesheet" href="path/to/ui.jqgrid.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-ui.js"></script>
<script src="path/to/grid.locale-cn.js"></script>
<script src="path/to/jquery.jqgrid.min.js"></script>

<div id="grid"></div>

$(function() {
  $("#grid").jqGrid({
    url: "data.json",  // 数据源URL
    datatype: "json",  // 数据类型
    colNames: ["表头1", "表头2"],  // 第一行表头
    colModel: [
      { name: "column1", index: "column1", width: 100 },  // 第一列配置
      { name: "column2", index: "column2", width: 100 }   // 第二列配置
    ],
    rowNum: 10,  // 每页显示的记录数
    rowList: [10, 20, 30],  // 每页显示记录数的下拉列表
    pager: "#gridPager",  // 分页控件的ID
    viewrecords: true,  // 是否显示总记录数
    caption: "带有两个表头的表格",  // 表格标题
    height: "auto",  // 表格高度自适应
    autowidth: true,  // 表格宽度自适应
    shrinkToFit: false,  // 列宽是否自适应
    multiselect: true,  // 是否显示多选框
    sortable: true,  // 是否可排序
    loadonce: true,  // 是否只加载一次数据
    jsonReader: {
      root: "rows",  // 数据行
      page: "page",  // 当前页码
      total: "total",  // 总页数
      records: "records",  // 总记录数
      repeatitems: false  // 是否重复使用相同的属性名
    }
  });
});