ax5ui-03-grid-tree-basic

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>
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-menu/master/dist/ax5menu.css">
<script src="https://cdn.rawgit.com/ax5ui/ax5ui-menu/master/dist/ax5menu.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="title">트리 리스트1 - basic</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() {
  return [{
      id: 0,
      name: 'Thomas Jang',
      price: 1000,
      amount: null,
      saleDt: '2016-08-29',
      customer: '장기영',
      saleType: 'A',
      isChecked: 'N'
    },
    {
      pid: '0',
      id: '2',
      name: 'Seowoo',
      price: 1100,
      amount: 11,
      saleDt: '2016-08-28',
      customer: '장서우',
      saleType: 'B',
      isChecked: 'Y'
    },
    {
      pid: '0',
      id: '3',
      name: 'Mondo',
      price: 1200,
      amount: 10,
      saleDt: '2016-08-27',
      customer: '이영희',
      saleType: 'A',
      isChecked: 'N'
    },
    {
      pid: '0',
      id: '4',
      name: 'Brant',
      price: 1300,
      amount: 8,
      saleDt: '2016-08-25',
      customer: '황인서',
      saleType: 'C',
      isChecked: 'N'
    },
    {
      pid: '4',
      id: '5',
      name: 'Tiffany',
      price: 1500,
      amount: 2,
      saleDt: '2016-08-26',
      customer: '이서연',
      saleType: 'A',
      isChecked: 'N'
    },
    {
      pid: '4',
      id: '6',
      name: 'Edward',
      price: 1400,
      amount: 5,
      saleDt: '2016-08-29',
      customer: '황세진',
      saleType: 'D',
      isChecked: 'N'
    },
    {
      pid: '4',
      id: '7',
      name: 'Bill',
      price: 1400,
      amount: 5,
      saleDt: '2016-08-29',
      customer: '이하종',
      saleType: 'B',
      isChecked: 'N'
    },
    {
      pid: '0',
      id: '8',
      name: 'Aeei',
      price: 1400,
      amount: 5,
      saleDt: '2016-08-29',
      customer: '김혜미',
      saleType: 'C',
      isChecked: 'N'
    }
  ];

})(22);

var defaultConfig = (function() {
  return {
    showLineNumber: true,
    showRowSelector: true,
    header: {
      align: 'center'
    },
    tree: {
      use: true,
      indentWidth: 10,
      arrowWidth: 15,
      iconWidth: 18,
      icons: {
        openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
        collapsedArrow: '<i class="fa fa-caret-right"...