usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>beforeKeyDown callback - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies)
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
  <script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
  <script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
  <script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
  <script data-jsfiddle="common" src="../dist/handsontable.js"></script>

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="beforeKeyDown callbacks">
  <meta property="og:description"
        content="">
  <meta property="og:url" content="http://handsontable.com/demo/beforeKeyDown.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/beforeKeyDown.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>

</head>

<body>


<div class="wrapper">
  <div class="wrapper-row">
    <div id="global-menu-clone">
      <h1><a href="../index.html">Handsontable</a></h1>

    </div>

    <div id="container">
      <div class="columnLayout">

        <div class="rowLayout">
      <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <a name="lazy"></a>

          <h2>beforeKeyDown callback</h2>

          <p>The following demo uses <code>beforeKeyDown</code> callback to modify some key bindings:</p>

          <ul>
            <li>Pressing DELETE or BACKSPACE on a cell deletes the cell and shifts all cells beneath it in the column up
              resulting in the cursor (which doesn't move) having the value previously beneath it, now in the current
              cell.
            </li>
            <li>Pressing ENTER in a cell (not changing the value) results in pushing all the cells in the column beneath
              this cell down one row (including current cell) resulting in a blank cell under the cursor (which hasn't
              moved)
            </li>
          </ul>

          <div id="example1"></div>

          <p>
            <button name="dump" data-dump="#example1" data-instance="hot" title="Prints current data source to Firebug/Chrome Dev Tools">
              Dump data to console
            </button>
          </p>
        </div>
      </div>

      <div class="codeLayout">
        <div class="pad">
          <div class="jsFiddle">
            <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
          </div>

          <script data-jsfiddle="example1">
            var data = [
                ['Nissan', 2009, 'black', 'black'],
                ['Nissan', 2006, 'blue', 'blue'],
                ['Chrysler', 2004, 'yellow', 'black'],
                ['Volvo', 2012, 'yellow', 'gray']
              ],
              container = document.getElementById("example1"),
              lastChange = null,
              hot;

            hot = new Handsontable(container, {
              data: data,
              colHeaders: true,
              rowHeaders: true,
              minSpareRows: 1,
              beforeChange: function (changes, source) {
                lastChange = changes;
              }
            });

            hot.updateSettings({
                beforeKeyDown: function (e) {
                  var selection = hot.getSelected();

                  // BACKSPACE or DELETE
                  if (e.keyCode === 8 || e.keyCode === 46) {
                    Handsontable.dom.stopImmediatePropagation(e);
                    // remove data at cell, shift up
                    hot.spliceCol(selection[1], selection[0], 1);
                    e.preventDefault();
                  }
                  // ENTER
                  else if (e.keyCode === 13) {
                    // if last change affected a single cell and did not change it's values
                    if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {
                      Handsontable.dom.stopImmediatePropagation(e);
                      hot.spliceCol(selection[1], selection[0], 0, ''); // add new cell
                      hot.selectCell(selection[0], selection[1]); // select new cell
                    }
                  }

                  lastChange = null;
                }
              }
            );
          </script>
        </div>
      </div>
    </div>

        <div class="footer-text">
        </div>
      </div>

    </div>

  </div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>