article:
Tutorial: Timed Notifications with CSS Animations
article:
Code: Twitter Bootstrap Extensions - Toggle Switches

Plugin: Handsontable approach to Excel - like table editor in HTML and jQuery

Advertisement

Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery. It equipped with column and row headers, Autoexpanding, Legend, Autocomplete, Scroll, Drag-down, Context menu, Save features etc.

Usage
step 1:

<script src="jquery.handsontable.js"></script>
<script src="lib/bootstrap-typeahead.js"></script><!-- if you need the autocomplete feature -->
<script src="lib/jquery.autoresize.js"></script><!-- if you need the autoexpanding textarea -->
<script src="lib/jQuery-contextMenu/jquery.contextMenu.js"></script><!-- if you need the context menu -->
<script src="lib/jQuery-contextMenu/jquery.ui.position.js"></script><!-- if you need the context menu -->
<link rel="stylesheet" media="screen" href="lib/jQuery-contextMenu/jquery.contextMenu.css">
<link rel="stylesheet" media="screen" href="jquery.handsontable.css">

step 2:

<div id="dataTable" class="dataTable"></div>
<script>
  $("#dataTable").handsontable({
    rows: 6,
    cols: 8
});
</script>

step 3:

<script>
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#dataTable").handsontable("loadData", data);
</script>

Plugin: Handsontable approach to Excel - like table editor in HTML and jQuery


Example
1. autoexpanding code

<div id="example1grid" class="dataTable"></div>
<script>
  $("#example1grid").handsontable({
    rows: 5,
    cols: 5,
    minSpareCols: 1, //always keep at least 1 spare row at the right
    minSpareRows: 1, //always keep at least 1 spare row at the bottom
    contextMenu: true
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example1grid").handsontable("loadData", data);
</script>

source


2. legend code:

<div id="example2grid" class="dataTable"></div>
<script>
  $("#example2grid").handsontable({
    rows: 5,
    cols: 5,
    rowHeaders: true,
    colHeaders: true,
    fillHandle: false, //fillHandle can be turned off
    contextMenu: ["row_above", "row_below", "remove_row"],
    //contextMenu will only allow inserting and removing rows
    legend: [
      {
        match: function (row, col, data) {
          return (row === 0); //if it is first row
        },
        style: {
          color: 'green', //make the text green and bold
          fontWeight: 'bold'
        },
        title: 'Heading' //make some tooltip
      },
      {
        match: function (row, col, data) {
          //if first row in this column contains word "Nissan"
          return (row > 0 && data()[0][col].indexOf('Nissan') > -1);
        },
        style: {
          fontStyle: 'italic' //make cells text in this column written in italic
        }
      }
    ]
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example2grid").handsontable("loadData", data);
</script>

source


3. autocomplete code

<div id="example3grid" class="dataTable"></div>
<script>
  $("#example3grid").handsontable({
    rows: 7,
    cols: 4,
    rowHeaders: false, //turn off 1, 2, 3, ...
    colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
    legend: [
      {
        match: function (row, col, data) {
          if (col == 0 || col == 2 || col == 3) {
            return true;
          }
          return false;
        },
        style: {
          fontStyle: 'italic' //make the text italic
        },
        title: "Type to show the list of options"
      }
    ],
    autoComplete: [
      {
        match: function (row, col, data) {
          if (col == 2 || col == 3) {
            return true;
          }
          return false;
        },
        highlighter: function (item) {
          var query = this.query.replace(/[-[]{}()*+?.,\^$|#s]/g, '\$&');
          var label = item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>';
          });
          return '<span style="margin-right: 10px; background-color: ' + item + '">&nbsp;&nbsp;&nbsp;</span>' + label;
        },
        source: function () {
          return ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
        }
      },
      {
        match: function (row, col, data) {
          return (col === 0); //if it is first column
        },
        source: function () {
          return ["BMW", "Chrysler", "Nissan", "Suzuki", "Toyota", "Volvo"]
        }
      }
    ]
  });
  var data = [
    ["Nissan", 2009, "black", "black"],
    ["Nissan", 2006, "blue", "blue"],
    ["Chrysler", 2004, "yellow", "black"],
    ["Volvo", 2012, "white", "gray"]
  ];
  $("#example3grid").handsontable("loadData", data);
</script>

source


4. scroll code

<div id="example4grid" class="dataTable" style="width: 680px;
    height: 300px; overflow: scroll"></div>
<script>
  $("#example4grid").handsontable({
    rows: 40,
    cols: 40,
    rowHeaders: true,
    colHeaders: true,
    minSpareCols: 1, //always keep at least 1 spare row at the right
    minSpareRows: 1 //always keep at least 1 spare row at the bottom
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example4grid").handsontable("loadData", data);
</script>

source


5. drag-down code

<div id="example5grid" class="dataTable"></div>
<script>
  $("#example5grid").handsontable({
    rows: 8,
    cols: 8,
    rowHeaders: true,
    colHeaders: true,
    minSpareCols: 1,
    minSpareRows: 1,
    fillHandle: true //possible values: true, false, "horizontal", "vertical"
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example5grid").handsontable("loadData", data);
</script>

source


6. context menu code

<div id="example7grid" class="dataTable"></div>
<script>
  $("#example7grid").handsontable({
    rows: 5,
    cols: 5,
    rowHeaders: true,
    colHeaders: true,
    minSpareCols: 1,
    minSpareRows: 1,
    contextMenu: true
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example7grid").handsontable("loadData", data);
</script>

source


7. save code

<div id="example6grid" class="dataTable"></div>
<pre id="example6console" class="console">
  Edit the above grid to see callback
</pre>
<script>
  var first = true;
  $("#example6grid").handsontable({
    rows: 8,
    cols: 8,
    rowHeaders: true,
    colHeaders: true,
    minSpareCols: 1,
    minSpareRows: 1,
    contextMenu: true,
    onBeforeChange: function (data) {
      for (var i = 0, ilen = data.length; i < ilen; i++) {
        if (data[i][3] === "foo") {
          //gently don't accept the word "foo"
          data[i][3] = false;
        }
        else if (data[i][3] === "bar") {
          //if the word bar is given, add a ! at the end of it
          data[i][3] = data[i][3] + '!';
        }
        else if (data[i][3] === "nuke") {
          //if any of pasted cells contains the word "nuke", reject the whole paste
          return false;
        }
      }
    },
    onChange: function (data) {
      if (first) {
        first = false;
        return; //don't show this change in console
      }
      $("#example6console").text(JSON.stringify(data));
    }
  });
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#example6grid").handsontable("loadData", data);
</script>

source

8. other

Plugin: Handsontable approach to Excel - like table editor in HTML and jQuery

advanced demos - custom buttons


Plugin: Handsontable approach to Excel - like table editor in HTML and jQuery

advanced demos - conditional formatting


Plugin: Handsontable approach to Excel - like table editor in HTML and jQuery

advanced demos - pre-populate new rows from template



source
demo
download

Advertisement
Tags: js, jquery, excel, editor, html, css, design, develop

Leave a Comment

No Comment

© Creative3x Ltd.