jqgridのヘッダーを2行にして、一部の列だけ結合

Question

実現したいこと

jqgridのヘッダーを2行にして、一部の列だけ結合したい。

発生している問題・分からないこと

jqgridで以下画像の「借用物」の部分のように、ヘッダーの一部分だけ結合したいのですが、可能なのでしょうか？

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ヘッダーを2行にした場合に2行とも結合することは可能のようですが、画像のように1行目だけを2列で結合する方法が分かりませんでした。

補足

特になし

Comments

[Lhankor_Mhy]

コードをご提示ください。jqgrid とはこれのことでいいですか→https://github.com/tonytomov/jqGrid

Answer 1

こんな感じで

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.8/css/ui.jqgrid.min.css"  />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.8/js/jquery.jqGrid.min.js"></script>
<script>
$(function(){
  var data = [
    {id:"1", name:"田中",smartphone :"◯",sensor:"◯"},
    {id:"2", name:"斎藤",smartphone :""  ,sensor:"◯"},
    {id:"3", name:"渡辺",smartphone :"◯",sensor:""},
  ];
 
  $("#grid01").jqGrid({
  data: data ,
  datatype: 'local',
  colNames:['ID', '氏名', 'スマホ', 'センサー'],
  colModel:[
    {index:'id',         name:'id',         width:'80px', align:'right'},
    {index:'name',       name:'name',       width:'80px', align:'left'},
    {index:'smartphone', name:'smartphone', width:'100px', align:'left'},
    {index:'sensor',     name:'sensor',     width:'100px', align:'left'},
    ]
    ,height:'auto'
  });
 
  $("#grid01").jqGrid('setGroupHeaders',{
  useColSpanStyle: true,
  groupHeaders:[
    {startColumnName: 'smartphone', numberOfColumns: 2, titleText: '借用物'}
    ],
  });
});
</script>
<table id="grid01"></table>

Comments

[engyoku4910]

ありがとうございます。
頂いたコードがやりたかったことです！
早速コードを元にコーディングしようと思います。