usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
							<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset='utf-8'>
  <title>Array, object and function data sources - 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="Array, object and function">
  <meta property="og:description"
        content="This page shows how to use Handsontable with various data sources: array, object and function.">
  <meta property="og:url" content="http://handsontable.com/demo/reference.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/reference.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">
              <h2>Array, object and function data sources</h2>

              <p>This page shows how to use Handsontable with various data sources:</p>

              <ul>
                <li><a href="#array">array data source</a></li>
                <li><a href="#array-hidden">array data source (with hidden columns)</a></li>
                <li><a href="#object">object data source</a></li>
                <li><a href="#nested">object data source (nested, with column mapping)</a></li>
                <li><a href="#dataschema">object data source (custom data schema)</a></li>
                <li><a href="#propertyschema">function data source and schema (to reach where arrays and objects can't
                  reach)</a></li>
              </ul>

              <p>Please take note that Handsontable will change the original data source. More about this here: <a
                href="understanding_reference.html">Understanding binding as reference</a>.</p>
            </div>
          </div>
        </div>

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

              <h2>Array data source</h2>

              <p>Most of the people use <strong>array of arrays</strong> data source with Handsontable.</p>

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

              <p>
                <button name="dump" data-dump="#example1" data-instance="hot1" 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" data-instance="hot1">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example1">
                var
                  data = [
                    ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
                    ['2008', 10, 11, 12, 13],
                    ['2009', 20, 11, 14, 13],
                    ['2009', 30, 15, 12, 13]
                  ],
                  container1 = document.getElementById('example1'),
                  hot1;

                hot1 = new Handsontable(container1, {
                  data: data,
                  startRows: 5,
                  startCols: 5,
                  colHeaders: true,
                  minSpareRows: 1
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example2">
              <a name="array-hidden"></a>

              <h2>Array data source (with hidden columns)</h2>

              <p>Let's say, you want the same data source, but without the <b>Kia</b> column.</p>

              <div id="example2"></div>

              <p>
                <button name="dump" data-instance="hot2" data-dump="#example2" 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="example2" >Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example2">
                var
                  hiddenData = [
                    ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
                    ['2008', 10, 11, 12, 13],
                    ['2009', 20, 11, 14, 13],
                    ['2009', 30, 15, 12, 13]
                  ],
                  container = document.getElementById('example2'),
                  hot2;

                hot2 = new Handsontable(container, {
                  data: hiddenData,
                  startRows: 5,
                  startCols: 5,
                  colHeaders: true,
                  columns: [
                    {data: 0},
                    {data: 2},
                    {data: 3},
                    {data: 4}
                  ],
                  minSpareRows: 1
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example3">
              <a name="object"></a>

              <h2>Object data source</h2>

              <p>With version 0.7.0, comes possibility to use <strong>array of objects</strong> data source.</p>

              <div id="example3"></div>

              <p>
                <button name="dump" data-dump="#example3" data-instance="hot3">Dump to console</button>
              </p>
            </div>
          </div>

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

              <script data-jsfiddle="example3">
                var
                  objectData = [
                    {id: 1, name: 'Ted Right', address: ''},
                    {id: 2, name: 'Frank Honest', address: ''},
                    {id: 3, name: 'Joan Well', address: ''}
                  ],
                  container3 = document.getElementById('example3'),
                  hot3;

                hot3 = new Handsontable(container3, {
                  data: objectData,
                  startRows: 5,
                  startCols: 3,
                  colHeaders: true,
                  minSpareRows: 1
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example4">
              <a name="nested"></a>

              <h2>Object data source (nested, with column mapping)</h2>

              <p>Some people have nested objects. They can also be used at the data source with a little bit of column
                mapping.</p>

              <p>The mapping is done using the <b>columns</b> option.</p>

              <div id="example4"></div>

              <p>
                <button name="dump" data-dump="#example4" data-instance="hot4" 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="example4" data-instance="hot4">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example4">
                var
                  nestedObjects = [
                    {id: 1, name: {first: "Ted", last: "Right"}, address: ""},
                    {id: 2, address: ""}, // HOT will create missing properties on demand
                    {id: 3, name: {first: "Joan", last: "Well"}, address: ""}
                  ],
                  container4 = document.getElementById('example4'),
                  hot4;

                hot4 = new Handsontable(container4, {
                  data: nestedObjects,
                  startRows: 5,
                  startCols: 4,
                  colHeaders: true,
                  columns: [
                    {data: 'id'},
                    {data: 'name.first'},
                    {data: 'name.last'},
                    {data: 'address'}
                  ],
                  minSpareRows: 1
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example5">
              <a name="dataschema"></a>

              <h2>Object data source (custom data schema)</h2>

              <p>When you use object data binding, Handsontable needs to know the data structure to create when you add a new
                row.</p>

              <p>If your data source contains at least one row, Handsontable will figure out the data structure based on the
                first row.</p>

              <p>In case you want to start with an empty data source, you will need to provide the <strong>dataSchema</strong>
                option that contains the data structure for any new row added to the grid.</p>

              <p>The below example shows custom data schema with an empty data source:</p>

              <div id="example5"></div>

              <p>
                <button name="dump" data-dump="#example5" data-instance="hot5" 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="example5" data-instance="hot5">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example5">
                var
                  container = document.getElementById('example5'),
                  hot5;

                hot5 = new Handsontable(container, {
                  data: [],
                  dataSchema: {id: null, name: {first: null, last: null}, address: null},
                  startRows: 5,
                  startCols: 4,
                  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
                  columns: [
                    {data: 'id'},
                    {data: 'name.first'},
                    {data: 'name.last'},
                    {data: 'address'}
                  ],
                  minSpareRows: 1
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example6">
              <a name="propertyschema"></a>

              <h2>Function data source and schema (to reach where arrays and objects can't reach)</h2>

              <p>
                If your <strong>dataSchema</strong> is actually a constructor of an
                object that doesn't directly expose its members, like a Backbone.js
                model, you can specify functions for the <strong>data</strong> member
                of each <strong>columns</strong> item.
              </p>

              <p>The below example shows a small example of using such objects:</p>

              <div id="example6"></div>

              <p>
                <button name="dump" data-dump="#example6" data-instance="hot6"  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="example6" data-instance="hot6">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example6">
                var
                  container6 = document.getElementById('example6'),
                  hot6;

                hot6 = new Handsontable(container6, {
                  data: [
                    model({id: 1, name: 'Ted Right', address: ''}),
                    model({id: 2, name: 'Frank Honest', address: ''}),
                    model({id: 3, name: 'Joan Well', address: ''})
                  ],
                  dataSchema: model,
                  startRows: 5,
                  startCols: 3,
                  colHeaders: ['ID', 'Name', 'Address'],
                  columns: [
                    {data: property('id')},
                    {data: property('name')},
                    {data: property('address')}
                  ],
                  minSpareRows: 1
                });

                function model(opts) {
                  var
                    _pub = {},
                    _priv = {
                      "id": undefined,
                      "name": undefined,
                      "address": undefined
                    };

                  for (var i in opts) {
                    if (opts.hasOwnProperty(i)) {
                      _priv[i] = opts[i];
                    }
                  }

                  _pub.attr = function (attr, val) {
                    if (typeof val === 'undefined') {
                      window.console && console.log("\t\tGET the", attr, "value of", _pub);
                      return _priv[attr];
                    }
                    window.console && console.log("SET the", attr, "value of", _pub);
                    _priv[attr] = val;

                    return _pub;
                  };

                  return _pub;
                }

                function property(attr) {
                  return function (row, value) {
                    return row.attr(attr, value);
                  }
                }
              </script>
            </div>
          </div>
        </div>

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

    </div>

  </div>
</div>

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

</body>
</html>