[MultiRow] ヘッダのレイアウト

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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">

  <div id="multiRow"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var orders = [
  { 受注コード: '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 },
];

var multiRow = new wijmo.grid.multirow.MultiRow('#multiRow', {
  itemsSource: orders,
  layoutDefinition: [
    {
      cells: [
        { binding: '受注コード' }
      ]
    },
    {
      colspan: 4, cells: [
        { binding: '氏名', colspan: 2 },
        { binding: '出荷先名' },
        { binding: '郵便番号' },
        { binding: '在籍支社' },
        { binding: '部署名' },
        { binding: '住所' },
      ]
    },
    {
      colspan: 3, cells: [
        { binding: '商品名', colspan: 2 },
        { binding: '区分名' },
        { binding: '単価' },
        { binding: '数量' },
        { binding: '合計' },
      ]
    },
  ],
  headerLayoutDefinition: [
    {
      cells: [
        { binding: '受注コード' }
      ]
    },
    {
      colspan: 4, cells: [
        { header: '受注情報', align: 'center', colspan: 4 },
        { header: '担当社員', align: 'center', colspan: 2 },
        { header: '出荷先', align: 'center', colspan: 2 },
        { binding: '氏名', colspan: 2 },
        { binding: '出荷先名' },
        { binding: '郵便番号' },
        { binding: '在籍支社' },
        { binding: '部署名' },
        { binding: '住所' },
      ]
    },
    {
      colspan: 3, cells: [
        { header: '明細情報', align: 'center', colspan: 2, rowspan: 2 },
        { binding: '商品名', colspan: 2 },
        { binding: '区分名' },
        { binding: '単価' },
        { binding: '数量' },
        { binding: '合計' },
      ]
    },
  ]
});
var filter = new wijmo.grid.filter.FlexGridFilter(multiRow);