forked from jspreadsheet/ce
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcurrency-and-masking-numbers.html
135 lines (106 loc) · 7.87 KB
/
currency-and-masking-numbers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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>