[FlexGrid] 列のグループ化

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <label><input type="checkbox" checked onchange="updateColumnGroups(this.checked)"> 列グループを折りたたみ可能にする</label><br>
  <div id="flexGrid"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: getData(),
  columnGroups: [
    { binding: '受注コード', width: 80 },
    { header: '受注情報', collapseTo: '出荷先名', align: 'center', columns: [
      { header: '担当社員', collapseTo: '氏名', align: 'center', columns: [
        { binding: '在籍支社', width: 80 },
        { binding: '部署名', width: 80 },
        { binding: '氏名', width: 100 },
      ] },
      { header: '出荷先', collapseTo: '出荷先名', align: 'center', columns: [
        { binding: '出荷先名', width: 120 },
        { binding: '郵便番号', width: 80 },
        { binding: '住所', width: 250 },
      ] },
    ] },
    { header: '明細情報', collapseTo: '合計', align: 'center', columns: [
      { binding: '商品名', width: 200 },
      { binding: '区分名', width: 80 },
      { binding: '単価', width: 80 },
      { binding: '数量', width: 80 },
      { binding: '合計', width: 80, format: 'c' },
    ] },
  ]
});

function updateColumnGroups(allowCollapse) {
  flexGrid.columnGroups[1].collapseTo = allowCollapse ? '出荷先名' : null;
  flexGrid.columnGroups[1].columns[0].collapseTo = allowCollapse ? '氏名' : null;
  flexGrid.columnGroups[1].columns[1].collapseTo = allowCollapse ? '出荷先名' : null;
  flexGrid.columnGroups[2].collapseTo = allowCollapse ? '合計' : null;
  flexGrid.columnGroups = flexGrid.columnGroups;
}

function getData() {
  return [
    { 受注コード: '1001', 氏名: '成宮 真紀', 在籍支社: '大阪支社', 部署名: '営業一', 出荷先名: '小料理ひろ', 郵便番号: '486-0969', 住所: '愛知県春日井市味美白山町1-9-X', 商品名: 'ピュアデミグラスソース', 区分名: '調味料', 単価: 200, 数量: 30, 合計: 6000 },
    { 受注コード: '1001', 氏名: '成宮 真紀', 在籍支社: '大阪支社', 部署名: '営業一', 出荷先名: '小料理ひろ', 郵便番号: '486-0969', 住所: '愛知県春日井市味美白山町1-9-X', 商品名: 'だしこんぶ', 区分名: '調味料', 単価: 290, 数量: 50, 合計: 14500 },
    { 受注コード: '1001', 氏名: '成宮 真紀', 在籍支社: '大阪支社', 部署名: '営業一', 出荷先名: '小料理ひろ', 郵便番号: '486-0969', 住所: '愛知県春日井市味美白山町1-9-X', 商品名: 'ピリカラタバスコ', 区分名: '調味料', 単価: 200, 数量: 20, 合計: 4000 },
  ];
}