new version 1.3.3 merged.

jspreadsheet · Sep 10, 2017 · 89d07ec · 89d07ec
1 parent 989e83d
commit 89d07ec
Show file tree

Hide file tree

Showing 16 changed files with 2,722 additions and 475 deletions.
diff --git a/dist/css/jquery.jexcel.css b/dist/css/jquery.jexcel.css
@@ -129,7 +129,7 @@
     text-align:left;
 }
 
-.jexcel > tbody > tr > td > select, .jexcel > tbody > tr > td > input
+.jexcel > tbody > tr > td > select, .jexcel > tbody > tr > td > input, .jexcel > tbody > tr > td > textarea
 {
     border:0px;
     border-radius:0px;
@@ -140,6 +140,11 @@
     background-color:transparent;
 }
 
+.jexcel > tbody > tr > td > textarea
+{
+    resize: none;
+}
+
 .jexcel > tbody > tr > td > select, .jexcel > tbody > tr > td > input[type=checkbox]
 {
     width:20px;
@@ -194,14 +199,16 @@
 .jexcel .results
 {
     position:absolute;
-    min-height:30px;
-    max-height:200px;
+    min-height:200px;
+    max-height:300px;
     width:220px;
     background-color:#fff;
     overflow-y:scroll;
     z-index:99;
     text-align:left;
     border:1px solid #ccc;
+    margin-top:7px;
+    margin-left:-4px;
 }
 .jexcel .results li
 {
@@ -211,7 +218,8 @@
 }
 .jexcel .results li:hover
 {
-    background-color:#eee;
+    background-color:#1e90ff;
+    color:#ffffff;
 }
 .jexcel .dragline
 {

diff --git a/dist/js/jquery.jexcel.js b/dist/js/jquery.jexcel.js
diff --git a/examples/autocomplete.html b/examples/autocomplete.html
diff --git a/examples/creating-a-table-from-an-external-csv-file.html b/examples/creating-a-table-from-an-external-csv-file.html
@@ -0,0 +1,115 @@
+<html>
+<head>
+<title>Jexcel - Javascript spreadsheet</title>
+<meta name='author' content='Paul Hodel'>
+<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
+<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
+<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
+<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
+<meta name='format-detection' content = "telephone=yes" />
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+<meta name=viewport content="width=device-width, initial-scale=1">
+<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />
+
+<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
+<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
+<meta itemprop="url" content="http://bossanova.uk/jexcel">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="jExcel">
+<meta property="og:url" content="http://bossanova.uk/jexcel">
+<meta property="og:locale" content="en_GB">
+<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
+
+<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
+<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />
+
+<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+
+<script src="../dist/js/jquery.jexcel.js"></script>
+<script src="../dist/js/jquery.jcalendar.js"></script>
+<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
+<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />
+
+</head>
+<body>
+
+<div class='container'>
+
+    <div class='row top'>
+
+        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
+        <div class='column'>
+
+            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>
+
+        </div>
+        <div class='column'>
+
+            <div id='search'></div>
+
+        </div>
+    </div>
+
+    <div class='row content'>
+
+        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>
+
+            <div id='content-left'>
+
+                <ul>
+                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
+                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
+                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
+                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
+                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
+                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
+                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
+                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
+                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
+                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
+                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
+                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
+                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
+                </ul>
+
+            </div>
+        </div>
+        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>
+
+            <div id='content'>
+
+<div class='title'>Creating a web spreadsheet based on an external CSV</div>
+
+<p>The example below creates a spreadsheet table based on a remote CSV file, including the headers. The examples also uses a third party jquery CSV parser plugin (100% IETF RFC 4180).
+
+Original file: <a href='http://cdn.bossanova.uk/demo/demo1.csv'>/components/bossanova/demo1.csv</a>.</p>
+
+<div id="my"></div>
+
+<p><button id='download'>Download Spreadsheet</button></p>
+
+<script>
+$('#my').jexcel({
+    csv:'http://cdn.bossanova.uk/demo/demo1.csv',
+    csvHeaders:true,
+    colWidths: [70, 200, 300],
+});
+
+$('#download').on('click', function () {
+    $('#my').jexcel('download');
+})
+</script>
+
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+</body>
+</html>
diff --git a/examples/currency-and-masking-numbers.html b/examples/currency-and-masking-numbers.html
@@ -0,0 +1,135 @@
+<html>
+<head>
+<title>Jexcel - Javascript spreadsheet</title>
+<meta name='author' content='Paul Hodel'>
+<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
+<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
+<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
+<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
+<meta name='format-detection' content = "telephone=yes" />
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+<meta name=viewport content="width=device-width, initial-scale=1">
+<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />
+
+<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
+<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
+<meta itemprop="url" content="http://bossanova.uk/jexcel">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="jExcel">
+<meta property="og:url" content="http://bossanova.uk/jexcel">
+<meta property="og:locale" content="en_GB">
+<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.3/jquery.mask.min.js"></script>
+
+<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
+<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />
+
+<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+
+<script src="../dist/js/jquery.jexcel.js"></script>
+<script src="../dist/js/jquery.jcalendar.js"></script>
+<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
+<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />
+
+</head>
+<body>
+
+<div class='container'>
+
+    <div class='row top'>
+
+        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
+        <div class='column'>
+
+            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>
+
+        </div>
+        <div class='column'>
+
+            <div id='search'></div>
+
+        </div>
+    </div>
+
+    <div class='row content'>
+
+        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>
+
+            <div id='content-left'>
+
+                <ul>
+                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
+                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
+                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
+                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
+                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
+                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
+                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
+                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
+                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
+                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
+                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
+                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
+                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
+                </ul>
+
+            </div>
+        </div>
+        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>
+
+            <div id='content'>
+
+<div class='title'>Currency and masking numbers</div>
+
+<p>How to work with numbers and currencies, and how to create live settings update on the spreadsheet based on column values.</p>
+
+<div id="my"></div>
+
+<script>
+data = [
+    ['3D Systems ', 'DDD', 15.08, 15.1, 0.01, 0.07],
+    ['3M', 'MMM', 178.34, 178.65, 0.49, 0.28],
+    ['58.com', 'ADR WUBA', 30.01, 29.1, -0.76, -2.55],
+    ['500.com', 'ADR WBAI', 13.48, 13.56, 0.1, 0.74],
+];
+
+$('#my').jexcel({
+    data:data,
+    colHeaders: ['Name', 'Symbol', 'Open', 'Close', '% Net', '% Change'],
+    colWidths: [ 300, 80, 100, 100, 100, 100 ],
+    columns: [
+              { type: 'text' },
+              { type: 'text' },
+              { type: 'text', mask:'#.###.00', options:{ reverse: true } },
+              { type: 'text', mask:'#.###.00', options:{ reverse: true } },
+              { type: 'text' },
+              { type: 'text' },
+              ]
+});
+
+$('#my').jexcel('updateSettings', {
+    cells: function (cell, col, row) {
+        if (col == 4 || col == 5) {
+            val = $('#my').jexcel('getValue', $(cell));
+            if (val < 0) {
+                $(cell).css('color', '#ff0000');
+            } else {
+                $(cell).css('color', '#249D7F');
+            }
+        }
+    }
+});
+</script>
+
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+</body>
+</html>