ax5ui-01-grid-basic

multi head and body merge and footer

by davids5x

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-calendar/master/dist/ax5calendar.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-select/master/dist/ax5select.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-calendar/master/dist/ax5calendar.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-formatter/master/dist/ax5formatter.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-select/master/dist/ax5select.min.js"></script>
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="title">그리드1 - multi head and body merge and footer</div>
      <div class="pb-1">
        <button type="button" class="btn btn-primary js-excel-export">Excel Export</button>
      </div>
      <div style="position: relative;height:400px;" id="grid-parent">
        <div data-ax5grid="grid1" style="height: 100%;"></div>
      </div>
    </div>
  </div>
</div>

CSS

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

.title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #505050;
  text-shadow: #fff 0 1px;
  padding-bottom: 0.5rem;
}

.box-warning {
  color: #c18300;
  background-color: #fff8e9;
  border: 1px solid #ffcd65;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

JavaScript

var vm = {};

var gridData = (function(len) {
  if (!len) len = 100;
  var sampleData = [{
      a: 'A',
      b: 'A01',
      price: 1000,
      amount: 12,
      saleDt: '2016-08-29',
      customer: '장기영',
      userType: 'M'
    },
    {
      a: 'A',
      b: 'A02',
      price: 1100,
      amount: 11,
      saleDt: '2016-08-28',
      customer: '장서우',
      userType: 'D'
    },
    {
      a: 'A',
      b: 'A03',
      price: 1200,
      amount: 10,
      saleDt: '2016-08-27',
      customer: '이영희',
      userType: 'W'
    },
    {
      a: 'B',
      b: 'B01',
      price: 1300,
      amount: 8,
      saleDt: '2016-08-25',
      customer: '황인서',
      userType: 'M'
    },
    {
      a: 'B',
      b: 'B02',
      price: 1400,
      amount: 5,
      saleDt: '2016-08-29',
      customer: '황세진',
      userType: 'S'
    },
    {
      a: 'B',
      b: 'B03',
      price: 1500,
      amount: 2,
      saleDt: '2016-08-26',
      customer: '이서연',
      userType: 'W'
    }
  ];

  var list = [],
    i = 0,
    item;
  for (; i < len; i++) {
    item = $.extend({}, sampleData[(Math.floor(Math.random() * sampleData.length))]);
    list.push(item);
  }
  return list;
})(22);

var defaultConfig = (function() {
  return {
    showLineNumber: true,
    showRowSelector: true,
    sortable: true,
    header: {
      align: 'center'
    },
  };
})();

function makePage(array, pageNumber, pageSize) {
  if (!list) list = [];
  if (!pageNumber) pageNumber = 0;
  if (!pageSize) pageSize = 10;
  var list = JSON.parse(JSON.stringify(array.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize)));
  var total = array.length;
  var totalPages = Math.ceil(total / pageSize);
  return {
    list: list,
    page: {
      currentPage: pageNumber,
      pageSize: pageSize,
      totalElements: total,
      totalPages: totalPages
    }
  };
}

function init() {
  vm.grid = new ax5.ui.grid($.extend(true, {}, defaultConfig, {
    target: $('[data-ax5grid="grid1"]'),
    page: {
     ...