-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…es pull request from #121)
- Loading branch information
Showing
20 changed files
with
1,597 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset='utf-8'> | ||
| <title>Numeric cell type - Handsontable</title> | ||
|
|
||
| <!-- | ||
| Loading Handsontable (full distribution that includes all dependencies apart from jQuery) | ||
| --> | ||
| <script src="../lib/jquery.min.js"></script> | ||
| <script src="../dist/jquery.handsontable.full.js"></script> | ||
| <script src="../lib/numeral.de-de.js"></script> | ||
| <link rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css"> | ||
|
|
||
| <!-- | ||
| Loading demo dependencies. They are used here only to enhance the examples on this page | ||
| --> | ||
| <link rel="stylesheet" media="screen" href="css/samples.css"> | ||
| <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"> | ||
|
|
||
| <!-- | ||
| Facebook open graph. Don't copy this to your project :) | ||
| --> | ||
| <meta property="og:title" content="Numeric cell type"> | ||
| <meta property="og:description" | ||
| content="Numeric cell type uses Numeral.js as the formatting library."> | ||
| <meta property="og:url" content="http://handsontable.com/demo/numeric.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/numeric.html"> | ||
|
|
||
| <!-- | ||
| Google Analytics for GitHub Page. Don't copy this to your project :) | ||
| --> | ||
| <script src="js/ga.js"></script> | ||
|
|
||
| <script class="common"> | ||
| function getCarData() { | ||
| return [ | ||
| ["Mercedes", "A 160", 2006, 6999.9999], | ||
| ["Citroen", "C4 Coupe", 2008, 8330], | ||
| ["Audi", "A4 Avant", 2011, 33900], | ||
| ["Opel", "Astra", 2004, 7000], | ||
| ["BMW", "320i Coupe", 2011, 30500] | ||
| ]; | ||
| } | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <a href="http://github.com/warpech/jquery-handsontable"> | ||
| <img style="position: absolute; top: 0; right: 0; border: 0;" | ||
| src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"/> | ||
| </a> | ||
|
|
||
| <div id="container"> | ||
|
|
||
| <div class="rowLayout"> | ||
| <div class="descLayout"> | ||
| <div class="pad"> | ||
| <h1><a href="../index.html">Handsontable</a></h1> | ||
|
|
||
| <div class="tagline">a minimalistic Excel-like <span class="nobreak">data grid</span> editor | ||
| for HTML, JavaScript & jQuery | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="rowLayout"> | ||
| <div class="descLayout"> | ||
| <div class="pad bottomSpace150"> | ||
| <a name="lazy"></a> | ||
|
|
||
| <h2>Numeric cell type</h2> | ||
|
|
||
| <p>By default, Handsontable treats all cell values as <code>string</code> type. This is because <code><textarea></code> | ||
| returns a string as its value.</p> | ||
|
|
||
| <p>In many cases you will prefer cell values to be treated as <code>number</code> type. This allows to format | ||
| numbers nicely and sort them correctly.</p> | ||
|
|
||
| <p>To trigger the Numeric cell type, use the option <code>type: 'numeric'</code> in <code>columns</code> array | ||
| or | ||
| <code>cells</code> function.</p> | ||
|
|
||
| <p>Numeric cell type uses <a href="http://numeraljs.com/">Numeral.js</a> as the formatting library. Head over to | ||
| their website to learn about the formatting syntax.</p> | ||
|
|
||
| <p>To use number formatting style valid for your language (i18n), load language definition to Numeral.js. See "Languages" section in <a href="http://numeraljs.com/">Numeral.js docs</a> for more info.</p> | ||
|
|
||
| <div id="example1"></div> | ||
|
|
||
| <p> | ||
| <button name="dump" data-dump="#example1" 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"> | ||
| <div class="jsFiddleLink">Edit in jsFiddle</div> | ||
| </div> | ||
|
|
||
| <script> | ||
| $("#example1").handsontable({ | ||
| data: getCarData(), | ||
| startRows: 7, | ||
| startCols: 4, | ||
| colHeaders: ["Car", "Model", "Year", "Price"], | ||
| columnSorting: true, | ||
| columns: [ | ||
| { | ||
| type: 'autocomplete', | ||
| source: ["Audi", "BMW", "Chrysler", "Citroen", "Mercedes", "Nissan", "Opel", "Suzuki", "Toyota", "Volvo"], | ||
| strict: false | ||
| }, | ||
| { | ||
| //2nd cell is simple text, no special options here | ||
| }, | ||
| { | ||
| type: 'numeric' | ||
| }, | ||
| { | ||
| type: 'numeric', | ||
| format: '0,0.00 $', | ||
| language: 'de-de' | ||
| } | ||
| ] | ||
| }); | ||
| </script> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="rowLayout"> | ||
| <div class="descLayout"> | ||
| <div class="pad"><p>For more examples, head back to the <a href="../index.html">main page</a>.</p> | ||
|
|
||
| <p class="small">Handsontable © 2012 Marcin Warpechowski and contributors.<br> Code and documentation | ||
| licensed under the The MIT License.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.