[全般] 元に戻す／やり直し

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

  <button id="undo" class="btn btn-primary" disabled><span class="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z)</button>
  <button id="redo" class="btn btn-primary" disabled><span class="arrow">&#x21B7;</span> やり直し (Ctrl+Y)</button>
  <div id="container">
    <h2>HTML要素</h2>
    <label for="text">テキスト</label><input id="text"><br>
    <label for="checkbox">チェックボックス</label><input id="checkbox" type="checkbox"><br>
    <label for="radio1">ラジオボタン</label>
    <input id="radio1" type="radio" name="radio" checked><label for="radio1" class="label-radio">&ensp;1&emsp;</label>
    <input id="radio2" type="radio" name="radio"><label for="radio2" class="label-radio">&ensp;2&emsp;</label>
    <input id="radio3" type="radio" name="radio"><label for="radio3" class="label-radio">&ensp;3&emsp;</label><br>
    <label for="select">セレクトボックス</label>
  ...

CSS

body {
  margin: 50px 0;
}
label:not(.label-radio) {
  width: 150px;
}
label {
  font-weight: normal;
}
#radialGauge {
  width: 100px;
  display: inline-table;
}
.wj-flexgrid {
  width: auto;
}
.wj-flexsheet {
  width: 600px;
  height: 200px;
}

JavaScript

initControls();
var btnUndo = document.getElementById('undo');
var btnRedo = document.getElementById('redo');
var undoStack = new wijmo.undo.UndoStack('#container', {
  stateChanged: function (s) {
    btnUndo.disabled = !s.canUndo;
    btnRedo.disabled = !s.canRedo;
  },
});
btnUndo.addEventListener('click', function () {
  undoStack.undo();
});
btnRedo.addEventListener('click', function () {
  undoStack.redo();
});

function initControls() {
  var inputDate = new wijmo.input.InputDate('#inputDate');
  var inputMask = new wijmo.input.InputMask('#inputMask', {
    mask: '〒000-0000'
  });
  var inputNumber = new wijmo.input.InputNumber('#inputNumber', {
    value: 1000,
    step: 1
  });
  var comboBox = new wijmo.input.ComboBox('#comboBox', {
    itemsSource: sample.countryNames()
  });
  var radialGauge = new wijmo.gauge.RadialGauge('#radialGauge', {
    value: 50,
    isReadOnly: false,
    pointer: { thickness: 0.5 }
  });
  var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
    itemsSource: sample.orders(),
    allowAddNew: true,
    allowDelete: true
  });
  flexGrid.columns[1].width = 200;
  var multiRow = new wijmo.grid.multirow.MultiRow('#multiRow', {
    itemsSource: sample.ordersDetail(3),
    layoutDefinition: [
      {
        cells: [
          { binding: 'No', header: 'No', width: 80 }
        ]
      },
      {
        colspan: 2, cells: [
          { binding: '商品名', header: '商品名', colspan: 2 },
          { binding: '分類名', header: '分類名' },
          { binding: '顧客名', header: '顧客名' },
        ]
      },
      {
        cells: [
          { binding: '数量', header: '数量' },
          { binding: '金額', header: '金額', format: 'c' }
        ]
      },
      {
        cells: [
          { binding: '受注日', header: '受注日' },
          { binding: '値引', header: '値引' }
        ]
      }
    ]
  });
  var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');
  flexSheet.addUnboundSheet('シート1');
}