feature: row and column headers. new methods selectCell, deselectCell

maheshbabu · Jun 18, 2012 · 800e595 · 800e595
1 parent 9a8b9da
commit 800e595
Show file tree

Hide file tree

Showing 5 changed files with 494 additions and 145 deletions.
diff --git a/README.md b/README.md
@@ -58,7 +58,9 @@ Maybe you want to show some default data. Use the `handsontable('loadData', data
  handsontable('alter', 'insert_col', index)                                            | Method      | Insert new column before the column at given index
  handsontable('alter',&nbsp;'remove_row',&nbsp;index,&nbsp;[toIndex])                  | Method      | Remove the row at given index [optionally to another index]
  handsontable('alter',&nbsp;'remove_col',&nbsp;index,&nbsp;[toIndex])                  | Method      | Remove the column at given index [optionally to another index]
- handsontable('getCell', row, col)                                                     | Method      | Return &lt;td&gt; element for given row, col
+ handsontable('getCell', row, col)                                                     | Method      | Return &lt;td&gt; element for given `row,col`
+ handsontable('selectCell', r, c, [r2, c2, scrollToSelection=true])                    | Method      | Select cell `r,c` or range finishing at `r2,c2`. By default, viewport will be scrolled to selection
+ handsontable('deselectCell')                                                          | Method      | Deselect current selection
 
 ## Options
 
@@ -68,6 +70,8 @@ The table below presents configuration options that are interpreted by `handsont
 ------------------|-------------------|-------------|-------------
  `rows`           | Number            | 5           | Initial number of rows
  `cols`           | Number            | 5           | Initial number of columns
+ `rowHeaders`     | Boolean/Array     | false       | Defines if the row headers (1, 2, 3, ...) should be displayed. You can just set it to `true` or specify custom a array `["First", "Second", "Third", ...]`
+ `colHeaders`     | Boolean/Array     | false       | Defines if the column headers (A, B, C, ...) should be displayed. You can just set it to `true` or specify custom a array `["First Name", "Last Name", "Address", ...]`
  `minWidth`       | Number            | 0           | Handsontable will add as many columns as needed to meet the given width in pixels
  `minHeight`      | Number            | 0           | Handsontable will add as many rows as needed to meet the given height in pixels
  `minSpareCols`   | Number            | 0           | When set to 1 (or more), Handsontable will add a new column at the end of grid if there are no more empty columns
@@ -102,14 +106,6 @@ legend: [
     },
     title: 'Heading', //make some tooltip
     readOnly: true //make it read-only
-  },
-  {
-    match: function (row, col, data) {
-      return (row > 0 && data()[0][col].indexOf('color') > 0); //if first cell in this column contains word "color"
-    },
-    style: {
-      fontStyle: 'italic' //make cells text in this column written in italic
-    }
   }
 ```
 

diff --git a/demo/js/demo.js b/demo/js/demo.js
@@ -30,8 +30,10 @@ $(function () {
       rows: 5,
       cols: 5,
 
-      fillHandle: false,
-      //fillHandle can be turned off
+      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
@@ -45,8 +47,7 @@ $(function () {
             color: 'green', //make the text green and bold
             fontWeight: 'bold'
           },
-          title: 'Heading', //make some tooltip
-          readOnly: true //make it read-only
+          title: 'Heading' //make some tooltip
         },
         {
           match: function (row, col, data) {
@@ -75,25 +76,27 @@ $(function () {
      */
     $("#example3grid").handsontable({
       rows: 7,
-      cols: 5,
+      cols: 4,
+      rowHeaders: false, //turn off 1, 2, 3, ...
+      colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
       legend: [
         {
           match: function (row, col, data) {
-            return (row === 0); //if it is first row
+            if (col == 0 || col == 2 || col == 3) {
+              return true;
+            }
+            return false;
           },
           style: {
-            color: '#666', //make the text gray and bold
-            fontWeight: 'bold'
+            fontStyle: 'italic' //make the text italic
           },
-          title: 'Heading', //make some tooltip
-          readOnly: true //make it read-only
+          title: "Type to show the list of options"
         }
       ],
       autoComplete: [
         {
           match: function (row, col, data) {
-            if (data()[0][col].indexOf("color") > -1) {
-              //if column name contains word "color"
+            if (col == 2 || col == 3) {
               return true;
             }
             return false;
@@ -121,7 +124,6 @@ $(function () {
     });
 
     var data = [
-      ["Car", "Year", "Chassis color", "Bumper color"],
       ["Nissan", 2009, "black", "black"],
       ["Nissan", 2006, "blue", "blue"],
       ["Chrysler", 2004, "yellow", "black"],
@@ -137,6 +139,8 @@ $(function () {
     $("#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
     });
@@ -157,6 +161,8 @@ $(function () {
     $("#example5grid").handsontable({
       rows: 8,
       cols: 8,
+      rowHeaders: true,
+      colHeaders: true,
       minSpareCols: 1,
       minSpareRows: 1,
       fillHandle: true //possible values: true, false, "horizontal", "vertical"
@@ -179,6 +185,8 @@ $(function () {
     $("#example6grid").handsontable({
       rows: 8,
       cols: 8,
+      rowHeaders: true,
+      colHeaders: true,
       minSpareCols: 1,
       minSpareRows: 1,
       contextMenu: true,
@@ -223,6 +231,8 @@ $(function () {
     $("#example7grid").handsontable({
       rows: 5,
       cols: 5,
+      rowHeaders: true,
+      colHeaders: true,
       minSpareCols: 1,
       minSpareRows: 1,
       contextMenu: true
@@ -236,8 +246,6 @@ $(function () {
     ];
 
     $("#example7grid").handsontable("loadData", data);
-
-
   }
 
   loadExamples();
@@ -252,5 +260,4 @@ $(function () {
     $this.find('a[href~=#' + $this.attr('id').replace('container', '') + ']').addClass('active');
   });
   examplesList.remove();
-})
-;
+});
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html xmlns="http://www.w3.org/1999/html">
 <head>
   <meta charset='utf-8'>
   <title>Handsontable - jQuery grid editor. Excel-like grid editing with HTML &amp; JavaScript</title>
@@ -40,7 +40,8 @@
 <h1><a href="index.html">Handsontable</a></h1>
 
 <div class="description">
-  Handsontable is a minimalistic (60 KB unminified) approach to Excel-like table editor in HTML &amp; jQuery
+  Handsontable is a minimalistic (70 KB unminified) approach to Excel-like table editor in HTML &amp; jQuery.
+  <strong>Now with column and row headers!</strong>
 </div>
 
 <h2 id="demos">Demos</h2>
@@ -117,9 +118,12 @@ <h3>Autoexpanding</h3>
   <div class="pad">
     <h3>Legend</h3>
 
-    <p>The <b>legend</b> feature, which makes the first row uneditable and have an
+    <p>The <b>legend</b> feature, which makes the first row have an
       <span style="color: green; font-weight: bold">green</span> font.</p>
 
+    <p>In the below example, the <strong>column</strong> (A, B, C) and <strong>row</strong> (1, 2, 3) headers are on.
+    </p>
+
     <div id="example2grid" class="dataTable"></div>
 
     <p>Code:</p>
@@ -131,8 +135,10 @@ <h3>Legend</h3>
     rows: 5,
     cols: 5,
 
-    fillHandle: false,
-    //fillHandle can be turned off
+    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
@@ -146,13 +152,12 @@ <h3>Legend</h3>
           color: 'green', //make the text green and bold
           fontWeight: 'bold'
         },
-        title: 'Heading', //make some tooltip
-        readOnly: true //make it read-only
+        title: 'Heading' //make some tooltip
       },
       {
         match: function (row, col, data) {
           //if first row in this column contains word "Nissan"
-          return (row &gt; 0 && data()[0][col].indexOf('Nissan') &gt; -1);
+          return (row &gt; 0 &amp;&amp; data()[0][col].indexOf('Nissan') &gt; -1);
         },
         style: {
           fontStyle: 'italic' //make cells text in this column written in italic
@@ -194,35 +199,37 @@ <h3>Autocomplete</h3>
 &lt;script&gt;
   $("#example3grid").handsontable({
     rows: 7,
-    cols: 5,
+    cols: 4,
+    rowHeaders: false, //turn off 1, 2, 3, ...
+    colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
     legend: [
       {
         match: function (row, col, data) {
-          return (row === 0); //if it is first row
+          if (col == 0 || col == 2 || col == 3) {
+            return true;
+          }
+          return false;
         },
         style: {
-          color: '#666', //make the text gray and bold
-          fontWeight: 'bold'
+          fontStyle: 'italic' //make the text italic
         },
-        title: 'Heading', //make some tooltip
-        readOnly: true //make it read-only
+        title: "Type to show the list of options"
       }
     ],
     autoComplete: [
       {
         match: function (row, col, data) {
-          if (data()[0][col].indexOf("color") > -1) {
-            //if column name contains word "color"
+          if (col == 2 || col == 3) {
             return true;
           }
           return false;
         },
         highlighter: function (item) {
-          var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
+          var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&amp;');
           var label = item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
             return '&lt;strong&gt;' + match + '&lt;/strong&gt;';
           });
-          return '&lt;span style="margin-right: 10px; background-color: ' + item + '"&gt;&nbsp;&nbsp;&nbsp;&lt;/span&gt;' + label;
+          return '&lt;span style="margin-right: 10px; background-color: ' + item + '"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;' + label;
         },
         source: function () {
           return ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
@@ -240,7 +247,6 @@ <h3>Autocomplete</h3>
   });
 
   var data = [
-    ["Car", "Year", "Chassis color", "Bumper color"],
     ["Nissan", 2009, "black", "black"],
     ["Nissan", 2006, "blue", "blue"],
     ["Chrysler", 2004, "yellow", "black"],
@@ -271,6 +277,8 @@ <h3>Scroll</h3>
   $("#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
   });
@@ -308,6 +316,8 @@ <h3>Drag-down</h3>
   $("#example5grid").handsontable({
     rows: 8,
     cols: 8,
+    rowHeaders: true,
+    colHeaders: true,
     minSpareCols: 1,
     minSpareRows: 1,
     fillHandle: true //possible values: true, false, "horizontal", "vertical"
@@ -343,6 +353,8 @@ <h3>Context menu</h3>
   $("#example7grid").handsontable({
     rows: 5,
     cols: 5,
+    rowHeaders: true,
+    colHeaders: true,
     minSpareCols: 1,
     minSpareRows: 1,
     contextMenu: true
@@ -392,11 +404,13 @@ <h3>Save</h3>
   $("#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++) {
+      for (var i = 0, ilen = data.length; i &lt; ilen; i++) {
         if (data[i][3] === "foo") {
           //gently don't accept the word "foo"
           data[i][3] = false;

diff --git a/jquery.handsontable.css b/jquery.handsontable.css
@@ -9,7 +9,7 @@
 }
 
 .dataTable table {
-  border-collapse: collapse;
+  border-collapse: separate;
   position: relative;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -21,6 +21,7 @@
   border-left: 1px solid #CCC;
 }
 
+.dataTable th,
 .dataTable td {
   border-right: 1px solid #CCC;
   border-bottom: 1px solid #CCC;
@@ -30,6 +31,23 @@
   padding: 0 4px 0 4px;
 }
 
+.dataTable th {
+  background-color: #EEE;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.dataTable thead th {
+  padding: 4px;
+}
+
+.dataTable th.active {
+  background-color: #CCC;
+}
+
 /* border background */
 .dataTable .htBorderBg {
   position: absolute;