Commit c8f4dae1 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki

use handsontable instead of jquery.sheet.

also fix a bug in importing JSON data.
parent 26cd97c0
/**
* Handsontable 0.10.0-beta4
* Handsontable is a simple jQuery plugin for editable tables with basic copy-paste compatibility with Excel and Google Docs
*
* Copyright 2012, Marcin Warpechowski
* Licensed under the MIT license.
* http://handsontable.com/
*
* Date: Wed Nov 27 2013 14:18:10 GMT+0100 (CET)
*/
.handsontable {
position: relative;
}
.handsontable.htAutoColumnSize {
visibility: hidden;
left: 0;
position: absolute;
top: 0;
}
.handsontable table,
.handsontable tbody,
.handsontable thead,
.handsontable td,
.handsontable th,
.handsontable div {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
.handsontable table.htCore {
border-collapse: separate;
/*it must be separate, otherwise there are offset miscalculations in WebKit: http://stackoverflow.com/questions/2655987/border-collapse-differences-in-ff-and-webkit*/
position: relative;
/*this actually only changes appearance of user selection - does not make text unselectable
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
/*user-select: none; /*no browser supports unprefixed version*/
border-spacing: 0;
margin: 0;
border-width: 0;
table-layout: fixed;
width: 0;
outline-width: 0;
/* reset bootstrap table style. for more info see: https://github.com/warpech/jquery-handsontable/issues/224 */
max-width: none;
max-height: none;
}
.handsontable col {
width: 50px;
}
.handsontable col.rowHeader {
width: 50px;
}
.handsontable th,
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 22px;
empty-cells: show;
line-height: 21px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
/* preserve new line character in cell */
}
.handsontable td.htInvalid {
-webkit-transition: background 0.75s ease;
transition: background 0.75s ease;
background-color: #ff4c42;
}
.handsontable th:last-child {
/*Foundation framework fix*/
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.handsontable tr:first-child th.htNoFrame,
.handsontable th:first-child.htNoFrame,
.handsontable th.htNoFrame {
border-left-width: 0;
background-color: white;
border-color: #FFF;
}
.handsontable th:first-child,
.handsontable td:first-child,
.handsontable .htNoFrame + th,
.handsontable .htNoFrame + td {
border-left: 1px solid #CCC;
}
.handsontable tr:first-child th,
.handsontable tr:first-child td {
border-top: 1px solid #CCC;
}
.handsontable thead tr:last-child th {
border-bottom-width: 0;
}
.handsontable thead tr.lastChild th {
border-bottom-width: 0;
}
.handsontable th {
background-color: #EEE;
color: #222;
text-align: center;
font-weight: normal;
white-space: nowrap;
}
.handsontable thead th {
padding: 0;
}
.handsontable th.active {
background-color: #CCC;
}
.handsontable thead th .relative {
position: relative;
padding: 2px 4px;
}
/* plugins */
.handsontable .manualColumnMover {
position: absolute;
left: 0;
top: 0;
background-color: transparent;
width: 5px;
height: 25px;
z-index: 999;
cursor: move;
}
.handsontable th .manualColumnMover:hover,
.handsontable th .manualColumnMover.active {
background-color: #88F;
}
.handsontable .manualColumnResizer {
position: absolute;
top: 0;
cursor: col-resize;
}
.handsontable .manualColumnResizerHandle {
background-color: transparent;
width: 5px;
height: 25px;
}
.handsontable .manualColumnResizer:hover .manualColumnResizerHandle,
.handsontable .manualColumnResizer.active .manualColumnResizerHandle {
background-color: #AAB;
}
.handsontable .manualColumnResizerLine {
position: absolute;
right: 0;
top: 0;
background-color: #AAB;
display: none;
width: 0;
border-right: 1px dashed #777;
}
.handsontable .manualColumnResizer.active .manualColumnResizerLine {
display: block;
}
.handsontable .columnSorting:hover {
text-decoration: underline;
cursor: pointer;
}
/* border line */
.handsontable .wtBorder {
position: absolute;
font-size: 0;
}
.handsontable td.area {
background-color: #EEF4FF;
}
/* fill handle */
.handsontable .wtBorder.corner {
font-size: 0;
cursor: crosshair;
}
.handsontable .htBorder.htFillBorder {
background: red;
width: 1px;
height: 1px;
}
.handsontableInput {
border: 2px solid #5292F7;
outline-width: 0;
margin: 0;
padding: 1px 4px 0 2px;
font-family: Arial, Helvetica, sans-serif;
/*repeat from .handsontable (inherit doesn't work with IE<8) */
line-height: 1.3em;
/*repeat from .handsontable (inherit doesn't work with IE<8) */
font-size: inherit;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
resize: none;
/*below are needed to overwrite stuff added by jQuery UI Bootstrap theme*/
display: inline-block;
color: #000;
border-radius: 0;
}
.handsontableInputHolder {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.htSelectEditor {
-webkit-appearance: menulist-button !important;
position: absolute;
}
/*
TextRenderer readOnly cell
*/
.handsontable .htDimmed {
font-style: italic;
color: #777;
}
/*
TextRenderer placeholder value
*/
.handsontable .htPlaceholder {
color: #999;
}
/*
AutocompleteRenderer down arrow
*/
.handsontable .htAutocompleteArrow {
float: right;
font-size: 10px;
color: #EEE;
cursor: default;
width: 16px;
text-align: center;
}
.handsontable td .htAutocompleteArrow:hover {
color: #777;
}
/*
CheckboxRenderer
*/
.handsontable .htCheckboxRendererInput.noValue {
opacity: 0.5;
}
/*
NumericRenderer
*/
.handsontable .htNumeric {
text-align: right;
}
/*context menu rules*/
ul.context-menu-list {
color: black;
}
ul.context-menu-list li {
margin-bottom: 0;
/*Foundation framework fix*/
}
/**
* dragdealer
*/
.handsontable .dragdealer {
position: relative;
width: 9px;
height: 9px;
background: #F8F8F8;
border: 1px solid #DDD;
}
.handsontable .dragdealer .handle {
position: absolute;
width: 9px;
height: 9px;
background: #C5C5C5;
}
.handsontable .dragdealer .disabled {
background: #898989;
}
/**
* Handsontable in Handsontable
*/
.handsontable .handsontable .wtHider {
padding: 0 0 5px 0;
}
.handsontable .handsontable table {
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
}
/**
* Handsontable listbox theme
*/
.handsontable.listbox {
margin: 0;
}
.handsontable.listbox table {
border: 1px solid #ccc;
border-collapse: separate;
background: white;
}
.handsontable.listbox th,
.handsontable.listbox tr:first-child th,
.handsontable.listbox tr:last-child th,
.handsontable.listbox tr:first-child td,
.handsontable.listbox td {
border-width: 0;
}
.handsontable.listbox th,
.handsontable.listbox td {
white-space: nowrap;
text-overflow: ellipsis;
}
.handsontable.listbox td.htDimmed {
cursor: default;
color: inherit;
font-style: inherit;
}
.handsontable.listbox .wtBorder {
visibility: hidden;
}
.handsontable.listbox tr td.current,
.handsontable.listbox tr:hover td {
background: #eee;
}
.htContextMenu {
display: none;
position: absolute;
}
.handsontable .htContextMenu table.htCore {
outline: 1px solid #bbb;
}
.handsontable .htContextMenu .wtBorder {
visibility: hidden;
}
.handsontable .htContextMenu table tbody tr td {
background: white;
border-width: 0;
padding: 4px 6px 0px 6px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.handsontable .htContextMenu table tbody tr td.htDimmed{
font-style: normal;
color: #323232;
}
.handsontable .htContextMenu table tbody tr td.current{
background: rgb(233, 233, 233);
}
.handsontable .htContextMenu table tbody tr td.htSeparator {
border-top: 1px solid #bbb;
height: 0;
padding: 0;
}
.handsontable .htContextMenu table tbody tr td.htDisabled {
color: #999;
}
.handsontable .htContextMenu table tbody tr td.htDisabled:hover {
background: white;
color: #999;
cursor: default;
}
\ No newline at end of file
......@@ -9,7 +9,7 @@
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/demo-new.css">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" href="lib/jquery.sheet-3.0/jquery.sheet.css">
<link rel="stylesheet" type="text/css" href="css/jquery.handsontable.full.css">
</head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
......@@ -76,12 +76,10 @@
</div>
</div>
<div class="sixteen columns">
<div id="spreadsheet">
<h4>Spreadsheet</h4>
<div class="jQuerySheet">
</div>
</div>
<div id="spreadsheet" class="sixteen columns">
<h4>Spreadsheet</h4>
<div id="spreadsheet_input"></div>
<div id="spreadsheet_output"></div>
</div>
<!-- DEP -->
......@@ -101,10 +99,7 @@
<script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<!-- jQuery.sheet -->
<script type="text/javascript" src="lib/jquery.sheet-3.0/jquery.sheet.min.js"></script>
<script type="text/javascript">
$.sheet.preLoad('lib/jquery.sheet-3.0/');
</script>
<script type="text/javascript" src="lib/jquery.handsontable.full.js"></script>
<div id="dialog-form" title="Configure">
<form>
......
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet({
allowCellsLineBreaks: false
});
});
</script>
</head>
<body>
<div id="sheetParent" title="Cell Value Behavior">
<table title="Cell Value Behaviour">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--bracket handling-->
<td>Bracket Handling</td>
<td data-formula="='<b>b</b>'"></td>
<td>&lt;b&gt;b&lt;/b&gt;</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--concat with format-->
<td>Concat with format</td>
<td data-formula="=CONCATENATE('Dollar Amount: ',DOLLAR(SUM(200)))"></td>
<td>Dollar Amount: 200</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td>For now concatenation makes formatting cells somewhat difficult, so for the time being the formatting is lost on concatenation. Same as example below.</td>
</tr>
<tr><!--concat operator with format-->
<td>Concat operator with format</td>
<td data-formula="='Dollar Amount: ' + DOLLAR(SUM(200))"></td>
<td>Dollar Amount: 200</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--line breaks-->
<td>Line Breaks</td>
<td data-formula="='Test
Test'"></td>
<td>Test
Test</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet({
hiddenColumns: [[1,2]],
hiddenRows: [[3,4]]
});
});
</script>
</head>
<body>
<div id="sheetParent" title="Hidden Cells">
<table data-hiddenrows="1,2" data-hiddencolumns="3,4" title="Hidden Cells">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Merged Cells">
<table title="Merged Cells">
<tr>
<td rowspan="2" colspan="2">Merged</td>
<td style="display: none;"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="display: none;"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Charts">
<TABLE style="width: 1401px; " title="Charts" class="jSheet ui-widget-content" id="jSheet_0_0" border="1px" cellpadding="0" cellspacing="0">
<COLGROUP>
<COL width="243px" style="width: 243px; "/>
<COL width="204px" style="width: 204px; "/>
<COL width="594" style="width: 594px; "/>
<COL width="120px" style="width: 120px; "/>
<COL width="120px" style="width: 120px; "/>
<COL width="120px" style="width: 120px; "/>
</COLGROUP>
<TBODY>
<TR height="18" style="height: 18px;">
<TD id="0_table0_cell_c0_r0" class="styleBold styleCenter">Chart Type</TD>
<TD id="0_table0_cell_c1_r0" class="styleBold styleCenter">Example</TD>
<TD id="0_table0_cell_c2_r0" class="styleBold styleCenter">Chart</TD>
<TD id="0_table0_cell_c3_r0" class="styleBold styleCenter">Sample Data</TD>
<TD id="0_table0_cell_c4_r0" class="styleBold styleCenter">Sample Legends</TD>
<TD id="0_table0_cell_c5_r0" class="styleBold styleCenter">Sample Years</TD>
</TR>
<TR height="155" style="height: 256px;">
<TD id="0_table0_cell_c0_r1">Simple Vertical Bar Chart</TD>
<TD id="0_table0_cell_c1_r1">"=BARCHART(D2:D8)"</TD>
<TD id="0_table0_cell_c2_r1" class="styleCenter" data-formula="=BARCHART(D2:D8)"></TD>
<TD id="0_table0_cell_c3_r1">1</TD>
<TD id="0_table0_cell_c4_r1">Nov</TD>
<TD id="0_table0_cell_c5_r1">2006</TD>
</TR>
<TR height="215" style="height: 215px;">
<TD id="0_table0_cell_c0_r2">Simple Horizontal Bar Chart</TD>
<TD id="0_table0_cell_c1_r2">"=HBARCHART(D2:D8)"</TD>
<TD class="styleCenter" id="0_table0_cell_c2_r2" data-formula="=HBARCHART(D2:D8)"></TD>
<TD id="0_table0_cell_c3_r2">2</TD>
<TD id="0_table0_cell_c4_r2">Dec</TD>
<TD id="0_table0_cell_c5_r2">2007</TD>
</TR>
<TR height="167" style="height: 167px;">
<TD id="0_table0_cell_c0_r3">Simple Line Chart</TD>
<TD id="0_table0_cell_c1_r3">"=LINECHART(D2:D8, F2:F6)"</TD>
<TD class="styleCenter" id="0_table0_cell_c2_r3" data-formula="=LINECHART(D2:D8, F2:F6)"></TD>
<TD id="0_table0_cell_c3_r3">5</TD>
<TD id="0_table0_cell_c4_r3">Mar</TD>
<TD id="0_table0_cell_c5_r3">2008</TD>
</TR>
<TR height="212px" style="height: 212px; ">
<TD id="0_table0_cell_c0_r4" style="height: 212px; " height="212px">Simple Pie Chart</TD>
<TD id="0_table0_cell_c1_r4" style="height: 212px; " height="212px">"=PIECHART(D2:D8)"</TD>
<TD id="0_table0_cell_c2_r4" class="styleCenter" data-formula="=PIECHART(D2:D8, E2:E8)" style="height: 212px; " height="212px"></TD>
<TD id="0_table0_cell_c3_r4" style="height: 212px; " height="212px">7</TD>
<TD id="0_table0_cell_c4_r4" style="height: 212px; " height="212px">May</TD>
<TD id="0_table0_cell_c5_r4" style="height: 212px; " height="212px">2009</TD>
</TR>
<TR height="22px" style="height: 22px; ">
<TD id="0_table0_cell_c0_r5" style="height: 22px; " height="22px"/>
<TD id="0_table0_cell_c1_r5" style="height: 22px; " height="22px"/>
<TD id="0_table0_cell_c2_r5" class="styleCenter" style="height: 22px; " height="22px"/>
<TD id="0_table0_cell_c3_r5" style="height: 22px; " height="22px">7.5</TD>
<TD id="0_table0_cell_c4_r5" style="height: 22px; " height="22px">June</TD>
<TD id="0_table0_cell_c5_r5" style="height: 22px; " height="22px">2010</TD>
</TR>
<TR height="23px" style="height: 23px; ">
<TD id="0_table0_cell_c0_r6" style="height: 23px; " height="23px"/>
<TD id="0_table0_cell_c1_r6" style="height: 23px; " height="23px"/>
<TD id="0_table0_cell_c2_r6" class="styleCenter" style="height: 23px; " height="23px"/>
<TD id="0_table0_cell_c3_r6" style="height: 23px; " height="23px">8</TD>
<TD id="0_table0_cell_c4_r6" style="height: 23px; " height="23px">July</TD>
<TD id="0_table0_cell_c5_r6" style="height: 23px; " height="23px">2011</TD>
</TR>
<TR style="height: 18px; ">
<TD id="0_table0_cell_c0_r7"/>
<TD id="0_table0_cell_c1_r7"/>
<TD id="0_table0_cell_c2_r7"/>
<TD id="0_table0_cell_c3_r7">8</TD>
<TD id="0_table0_cell_c4_r7">August</TD>
<TD id="0_table0_cell_c5_r7">2012</TD>
</TR>
<TR style="height: 18px; ">
<TD id="0_table0_cell_c0_r8"/>
<TD id="0_table0_cell_c1_r8"/>
<TD id="0_table0_cell_c2_r8"/>
<TD id="0_table0_cell_c3_r8"/>
<TD id="0_table0_cell_c4_r8"/>
<TD id="0_table0_cell_c5_r8"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table0_cell_c0_r9"/>
<TD id="0_table0_cell_c1_r9"/>
<TD id="0_table0_cell_c2_r9"/>
<TD id="0_table0_cell_c3_r9"/>
<TD id="0_table0_cell_c4_r9"/>
<TD id="0_table0_cell_c5_r9"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table0_cell_c0_r10"/>
<TD id="0_table0_cell_c1_r10"/>
<TD id="0_table0_cell_c2_r10"/>
<TD id="0_table0_cell_c3_r10"/>
<TD id="0_table0_cell_c4_r10"/>
<TD id="0_table0_cell_c5_r10"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table0_cell_c0_r11"/>
<TD id="0_table0_cell_c1_r11"/>
<TD id="0_table0_cell_c2_r11"/>
<TD id="0_table0_cell_c3_r11"/>
<TD id="0_table0_cell_c4_r11"/>
<TD id="0_table0_cell_c5_r11"/>
</TR>
</TBODY>
</TABLE>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Dates">
<table title="Dates">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--date-->
<td>DATE</td>
<td data-formula="=DATE(2012,11,20)"></td>
<td>41233</td>
<td data-formula="=IF(B2 = C2, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--datevalue-->
<td>DATEVALUE</td>
<td data-formula="=DATEVALUE('11/20/2012')"></td>
<td>41233</td>
<td data-formula="=IF(B3 = C3, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--day-->
<td>DAY</td>
<td data-formula="=DAY('11/20/2012')"></td>
<td>20</td>
<td data-formula="=IF(B4 = C4, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--days360-->
<td>DAYS360</td>
<td data-formula="=DAYS360('09/01/2012', '08/31/2013')"></td>
<td>360</td>
<td data-formula="=IF(B5 = C5, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--days360-->
<td>DAYS360</td>
<td data-formula="=DAYS360('09/01/2012', '08/31/2013', true)"></td>
<td>359</td>
<td data-formula="=IF(B6 = C6, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--edate-->
<td>EDATE</td>
<td data-formula="=EDATE('11/20/2012', 1)"></td>
<td>41263</td>
<td data-formula="=IF(B7 = C7, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--eomonth-->
<td>EOMONTH</td>
<td data-formula="=EOMONTH('11/20/2012', 1)"></td>
<td>41274</td>
<td data-formula="=IF(B8 = C8, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--hour-->
<td>HOUR</td>
<td data-formula="=HOUR(10:30AM)"></td>
<td>10</td>
<td data-formula="=IF(B9 = C9, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--minute-->
<td>MINUTE</td>
<td data-formula="=MINUTE(10:30AM)"></td>
<td>30</td>
<td data-formula="=IF(B10 = C10, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--month-->
<td>MONTH</td>
<td data-formula="=MONTH(DATE(2012,11,20))"></td>
<td>11</td>
<td data-formula="=IF(B11 = C11, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--now-->
<td>NOW</td>
<td data-formula="=NOW()"></td>
<td></td>
<td>Not Checkable</td>
<td></td>
</tr>
<tr><!--second-->
<td>SECOND</td>
<td data-formula="=SECOND(TIME(10,30,54))"></td>
<td>54</td>
<td data-formula="=IF(B13 = C13, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--time-->
<td>TIME</td>
<td data-formula="=TIME(9,79,660)"></td>
<td>0.4375</td>
<td data-formula="=IF(B14 = C14, TRUE, FALSE)"></td>
<td>Equal to 10:30</td>
</tr>
<tr><!--timevalue-->
<td>TIMEVALUE</td>
<td data-formula="=TIMEVALUE(10:30am)"></td>
<td>0.4375</td>
<td data-formula="=IF(B15 = C15, TRUE, FALSE)"></td>
<td>Equal to 10:30</td>
</tr>
<tr><!--today-->
<td>TODAY</td>
<td data-formula="=TODAY()"></td>
<td></td>
<td>Not Checkable</td>
<td></td>
</tr>
<tr><!--weekday sunday 1-7 saturday-->
<td>WEEKDAY</td>
<td data-formula="=WEEKDAY('11/20/2012')"></td>
<td>3</td>
<td data-formula="=IF(B17 = C17, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--weekday monday 1-7 sunday -->
<td>WEEKDAY</td>
<td data-formula="=WEEKDAY('11/20/2012', 2)"></td>
<td>1</td>
<td data-formula="=IF(B18 = C18, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--weekday monday 0-6 sunday -->
<td>WEEKDAY</td>
<td data-formula="=WEEKDAY('11/20/2012', 3)"></td>
<td>2</td>
<td data-formula="=IF(B19 = C19, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--weeknum-->
<td>WEEKNUM</td>
<td data-formula="=WEEKNUM('11/20/2012', 3)"></td>
<td>48</td>
<td data-formula="=IF(B20 = C20, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--workday-->
<td>WORKDAY</td>
<td data-formula="=WORKDAY(DATE(2012,11,20), 1000, DATE(2013,1,1))"></td>
<td>42634</td>
<td data-formula="=IF(B21 = C21, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--year-->
<td>YEAR</td>
<td data-formula="=YEAR('11/20/2012', 3)"></td>
<td>2012</td>
<td data-formula="=IF(B22 = C22, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--yearfrac-->
<td>YEARFRAC</td>
<td data-formula="=YEARFRAC(DATE(2012,1,1), DATE(2012,7,1))"></td>
<td>0.5</td>
<td data-formula="=IF(B23 = C23, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--yearfrac-->
<td>YEARFRAC</td>
<td data-formula="=YEARFRAC(DATE(2012,1,1), DATE(2012,7,1), 1)"></td>
<td>0.4972677595628415</td>
<td data-formula="=IF(B24 = C24, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--yearfrac-->
<td>YEARFRAC</td>
<td data-formula="=YEARFRAC(DATE(2012,1,1), DATE(2012,7,1), 2)"></td>
<td>0.5055555555555555</td>
<td data-formula="=IF(B25 = C25, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--yearfrac-->
<td>YEARFRAC</td>
<td data-formula="=YEARFRAC(DATE(2012,1,1), DATE(2012,7,1), 3)"></td>
<td>0.4986301369863014</td>
<td data-formula="=IF(B26 = C26, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--yearfrac-->
<td>YEARFRAC</td>
<td data-formula="=YEARFRAC(DATE(2012,1,1), DATE(2012,7,1), 4)"></td>
<td>0.5</td>
<td data-formula="=IF(B27 = C27, TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!--Required-->
<link rel="stylesheet" type="text/css" href="../jquery.sheet.css" />
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../plugins/globalize.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript" src="../parser/formula/formula.js"></script>
<!--/Required-->
<!--Optional-->
<!--MouseWheel-->
<script type="text/javascript" src="../plugins/jquery.mousewheel.min.js"></script>
<!--/MouseWheel-->
<!--Nearest-->
<script type="text/javascript" src="../plugins/jquery.nearest.min.js"></script>
<!--/Nearest-->
<!--jQuery UI-->
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<!--/jQuery UI-->
<!--Raphaeljs - for charts-->
<script type="text/javascript" src="../plugins/raphael-min.js"></script>
<script type="text/javascript" src="../plugins/g.raphael-min.js"></script>
<!--/Raphaeljs-->
<!--ColorPicker-->
<link rel="stylesheet" type="text/css" href="../plugins/jquery.colorPicker.css" />
<script type="text/javascript" src="../plugins/jquery.colorPicker.min.js"></script>
<!--/ColorPicker-->
<!--Theme Switcher Tool-->
<!--<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>-->
<!--/Theme Switcher Tool-->
<!--Elastic-->
<script type="text/javascript" src="../plugins/jquery.elastic.min.js"></script>
<!--/Elastic-->
<!--Advanced_Math-->
<script type="text/javascript" src="../plugins/jquery.sheet.advancedfn.js"></script>
<!--/Advanced_Math-->
<!--Finance-->
<script type="text/javascript" src="../plugins/jquery.sheet.financefn.js"></script>
<!--/Finance-->
<!--/Optional-->
<script type="text/javascript">
$(function(){
$('#jQuerySheet0').sheet();
});
</script>
</head>
<body>
<div id="sheetParent">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Financial">
<table title="Financial">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--fv-->
<td>FV</td>
<td data-formula="=FV(7.5%/12, 2*12, -250, -5000, 1)"></td>
<td>12298.46381980343</td>
<td data-formula="=IF(B2 = C2, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--ipmt-->
<td>IPMT</td>
<td data-formula="=IPMT(10%, 3, 3, 8000)"></td>
<td>-292.4471299093658</td>
<td data-formula="=IF(B3 = C3, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--ipmt-->
<td>IPMT</td>
<td data-formula="=IPMT(3.5%/4, 2, 8, 10000, 5000, true)"></td>
<td>-70.96865039555856</td>
<td data-formula="=IF(B4 = C4, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--ipmt-->
<td>IPMT</td>
<td data-formula="=IPMT(5%/12, 1, 60, 50000)"></td>
<td>-208.33333333333334</td>
<td data-formula="=IF(B5 = C5, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--nper-->
<td>NPER</td>
<td data-formula="=NPER(12%/12, -100, -1000, 10000, TRUE)"></td>
<td>59.67386567429457</td>
<td data-formula="=IF(B6 = C6, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--nper-->
<td>NPER</td>
<td data-formula="=NPER(12%/12, -100, -1000, 10000)"></td>
<td>60.08212285376166</td>
<td data-formula="=IF(B7 = C7, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--npv-->
<td>NPV</td>
<td data-formula="=NPV(10%, -10000, 3000, 4200, 6800)"></td>
<td>1188.4434123352207</td>
<td data-formula="=IF(B8 = C8, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--pmt-->
<td>PMT</td>
<td data-formula="=PMT(8%/12, 10, 10000)"></td>
<td>-1037.0320893591604</td>
<td data-formula="=IF(B9 = C9, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--pmt-->
<td>PV</td>
<td data-formula="=PV(0.075/12, 2*12, 250, 0, 0)"></td>
<td>-5555.605845933733</td>
<td data-formula="=IF(B10 = C10, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--pmt-->
<td>PV</td>
<td data-formula="=PV(0.06/52, 4*52, 50, 0, 1)"></td>
<td>-9252.072719338317</td>
<td data-formula="=IF(B11 = C11, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--rate-->
<td>RATE</td>
<td data-formula="=RATE(2*12, -250, 5000)"></td>
<td>0.015130843902309656</td>
<td data-formula="=IF(B12 = C12, TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../', {skip: null});
$(function () {
var parent = $('#sheetParent'),
children = parent.children().clone(),
cultureSelect = $('#cultureSelect')
.change(function() {
Globalize.culture( $(this).val() );
parent
.html(children.clone())
.sheet();
});
$.each(Globalize.cultures, function (i) {
cultureSelect.append('<option value="' + i + '">' + this.englishName + ' / ' + this.nativeName + '</option>');
});
$('#sheetParent').sheet();
});
</script>
</head>
<body>
Language: <select id="cultureSelect"></select>
<div id="sheetParent" title="Dates">
<table title="Dates">
<tbody>
<tr>
<td class="styleBold styleCenter">Format Type</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--date-->
<td>DATE</td>
<td data-formula="=DATE(2012,11,20)"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--datevalue-->
<td>NUMBER</td>
<td data-formula="=123456789"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Information Functions">
<table title="Information Functions">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--isnumber-->
<td>ISNUMBER</td>
<td data-formula="=ISNUMBER(100)"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B2 = C2, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--isnumber-->
<td>ISNUMBER</td>
<td data-formula="=ISNUMBER('test')"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B3 = C3, TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('<div />').load('../examples/inputs.html #sheetParent table', function() {
$('#sheetParent')
.html($(this).html())
.sheet({
sheetAllOpened: function() {
console.log($(this).serializeCellInputs(true));
}
});
});
});
</script>
</head>
<body>
<div id="sheetParent" title="Inputs"></div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Inputs">
<TABLE title="Inputs">
<COLGROUP>
<COL width="197px" style="width: 197px; "/>
<COL width="206px" style="width: 206px; "/>
<COL width="132px" style="width: 132px; "/>
<COL width="120px" style="width: 120px; "/>
<COL width="120px" style="width: 120px; "/>
</COLGROUP>
<TBODY>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r0">Inputs are for capturing fixed data, such as a drop down list (DROPDOWN), or a checkbox (CHECKBOX)</TD>
<TD id="0_table1_cell_c1_r0"/>
<TD id="0_table1_cell_c2_r0"/>
<TD id="0_table1_cell_c3_r0"/>
<TD id="0_table1_cell_c4_r0"/>
</TR>
<TR height="18px" style="height: 18px;">
<TD class="styleBold" id="0_table1_cell_c0_r1">Input Type</TD>
<TD class="styleBold" id="0_table1_cell_c1_r1">Example</TD>
<TD class="styleBold" id="0_table1_cell_c2_r1"/>
<TD class="styleBold" id="0_table1_cell_c3_r1">Data Number</TD>
<TD class="styleBold" id="0_table1_cell_c4_r1">Data String</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r2">Select List</TD>
<TD id="0_table1_cell_c1_r2">"=DROPDOWN(D3:D10)"</TD>
<TD selectedvalue="4" data-formula="=DROPDOWN(D3:D10)" id="0_table1_cell_c2_r2">4</TD>
<TD id="0_table1_cell_c3_r2">34</TD>
<TD id="0_table1_cell_c4_r2">Lorem</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r3">Radio List</TD>
<TD id="0_table1_cell_c1_r3">"=RADIO(E3:E10)"</TD>
<TD selectedvalue="Donec" data-formula="=RADIO(E3:E10)" id="0_table1_cell_c2_r3">Donec</TD>
<TD id="0_table1_cell_c3_r3">-20</TD>
<TD id="0_table1_cell_c4_r3">Proin</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r4">Checkbox</TD>
<TD id="0_table1_cell_c1_r4">"=CHECKBOX(E3)"</TD>
<TD selectedvalue="true" data-formula="=CHECKBOX(E3)" id="0_table1_cell_c2_r4">true</TD>
<TD id="0_table1_cell_c3_r4">123</TD>
<TD id="0_table1_cell_c4_r4">Aliquam</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r5">Get Select List Value</TD>
<TD id="0_table1_cell_c1_r5">"=C3"</TD>
<TD data-formula="=C3" id="0_table1_cell_c2_r5">4</TD>
<TD id="0_table1_cell_c3_r5">123</TD>
<TD id="0_table1_cell_c4_r5">Quisque</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r6">Get Radio List Value</TD>
<TD id="0_table1_cell_c1_r6">"=C4"</TD>
<TD data-formula="=C4" id="0_table1_cell_c2_r6">Donec</TD>
<TD id="0_table1_cell_c3_r6">4</TD>
<TD id="0_table1_cell_c4_r6">Aliquam</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r7">Get Checkbox Value</TD>
<TD id="0_table1_cell_c1_r7">"=C5"</TD>
<TD data-formula="=C5" id="0_table1_cell_c2_r7">false</TD>
<TD id="0_table1_cell_c3_r7">534456</TD>
<TD id="0_table1_cell_c4_r7">Vivamus</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r8"></TD>
<TD id="0_table1_cell_c1_r8"></TD>
<TD id="0_table1_cell_c2_r8"></TD>
<TD id="0_table1_cell_c3_r8">3</TD>
<TD id="0_table1_cell_c4_r8">Etiam</TD>
</TR>
<TR height="18px" style="height: 18px;">
<TD id="0_table1_cell_c0_r9"/>
<TD id="0_table1_cell_c1_r9"/>
<TD id="0_table1_cell_c2_r9"/>
<TD id="0_table1_cell_c3_r9">1</TD>
<TD id="0_table1_cell_c4_r9">Donec</TD>
</TR>
<TR style="height: 18px; ">
<TD id="0_table1_cell_c0_r10"/>
<TD id="0_table1_cell_c1_r10"/>
<TD id="0_table1_cell_c2_r10"/>
<TD id="0_table1_cell_c3_r10"/>
<TD id="0_table1_cell_c4_r10"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table1_cell_c0_r11"/>
<TD id="0_table1_cell_c1_r11"/>
<TD id="0_table1_cell_c2_r11"/>
<TD id="0_table1_cell_c3_r11"/>
<TD id="0_table1_cell_c4_r11"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table1_cell_c0_r12"/>
<TD id="0_table1_cell_c1_r12"/>
<TD id="0_table1_cell_c2_r12"/>
<TD id="0_table1_cell_c3_r12"/>
<TD id="0_table1_cell_c4_r12"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table1_cell_c0_r13"/>
<TD id="0_table1_cell_c1_r13"/>
<TD id="0_table1_cell_c2_r13"/>
<TD id="0_table1_cell_c3_r13"/>
<TD id="0_table1_cell_c4_r13"/>
</TR>
<TR style="height: 18px; ">
<TD id="0_table1_cell_c0_r14"/>
<TD id="0_table1_cell_c1_r14"/>
<TD id="0_table1_cell_c2_r14"/>
<TD id="0_table1_cell_c3_r14"/>
<TD id="0_table1_cell_c4_r14"/>
</TR>
</TBODY>
</TABLE>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$.get('../sheets/numberstesting.html', function(html) {
for (var i = 0; i < 2; i++) {
$('#sheetParent')
.html(html)
.sheet();
$.sheet.killAll();
}
$('#sheetParent')
.html(html)
.sheet();
});
});
</script>
</head>
<body>
<div id="sheetParent" title="Killall">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Logical Functions">
<table title="Logical Functions">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--and-->
<td>AND</td>
<td data-formula="=AND(true,true,true,true)"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B2 = C2, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--and-->
<td>AND</td>
<td data-formula="=AND(true,false,true,true)"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B3 = C3, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--false-->
<td>FALSE</td>
<td data-formula="=FALSE()"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B4 = C4, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--true-->
<td>TRUE</td>
<td data-formula="=TRUE()"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B5 = C5, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--if-->
<td>IF</td>
<td data-formula="=IF(TRUE(),TRUE(),FALSE())"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B6 = C6, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--if-->
<td>IF</td>
<td data-formula="=IF(FALSE(),TRUE(),FALSE())"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B7 = C7, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--not-->
<td>NOT</td>
<td data-formula="=NOT(FALSE())"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B8 = C8, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--not-->
<td>NOT</td>
<td data-formula="=NOT(TRUE())"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B9 = C9, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--or-->
<td>OR</td>
<td data-formula="=OR(TRUE(), FALSE())"></td>
<td data-formula="=TRUE()"></td>
<td data-formula="=IF(B10 = C10, TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--or-->
<td>OR</td>
<td data-formula="=OR(FALSE(), FALSE())"></td>
<td data-formula="=FALSE()"></td>
<td data-formula="=IF(B11 = C11, TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../plugins/globalize.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<!--optional-->
<script type="text/javascript" src="../plugins/jquery.sheet.advancedfn.js"></script>
<!--/optional-->
<!--optional-->
<script type="text/javascript" src="../plugins/jquery.sheet.financefn.js"></script>
<!--/optional-->
<script type="text/javascript" src="../jquery.pseudosheet.js"></script>
<script type="text/javascript" src="../parser/formula/formula.js"></script>
<script>
$(function() {
$('.objVal').pseudoSheet();
$('.check').change(function() {
$('.check').pseudoSheet();
}).change();
$('.radio').change(function() {
$('.radio').pseudoSheet();
}).change();
$('.idValues').pseudoSheet();
$('.nameValues').pseudoSheet();
$('.vis').pseudoSheet();
$('.enabled').pseudoSheet();
$('.loop').pseudoSheet();
$('.outside').pseudoSheet();
$('.outsideInclusion').pseudoSheet();
$('.time').pseudoSheet();
$('.result').each(function() {
if($(this).is(':contains("FAILURE")')) {
$(this)
.css('background-color', 'red')
.css('color', 'white');
} else {
$(this)
.css('background-color', 'green')
.css('color', 'white');
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Test</td>
<td>Output</td>
<td>Result</td>
</tr>
<tr>
<td>Function: OBJVAL</td>
<td>
<span class="objVal" data-formula="=SUM(OBJVAL('.objVal:eq(1)'),100)"></span>
<span class="objVal" data-visible="=FALSE">100</span>
</td>
<td class="result">
<span class="objVal" data-formula="=IF(OBJVAL('.objVal:eq(0)') = 200, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Checkbox Functionality</td>
<td>
<input type="checkbox" name="testCheckbox" class="check" value="FAILURE"/>
<input type="checkbox" name="testCheckbox" class="check" value="SUCCESS" checked="true"/>
<input type="input" class="check" data-formula="=testCheckbox"/>
</td>
<td class="result">
<span class="check" data-formula="=IF(OBJVAL('.check:eq(2)') = 'SUCCESS', 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Radio Functionality</td>
<td>
<input type="radio" name="testRadio" class="radio" value="FAILURE"/>
<input type="radio" name="testRadio" class="radio" value="SUCCESS" checked="true"/>
<input type="input" class="radio" data-formula="=testRadio"/>
</td>
<td class="result">
<span class="radio" data-formula="=IF(OBJVAL('.radio:eq(2)') = 'SUCCESS', 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>IDs</td>
<td>
<input class="idValues" type="input" data-formula="=idVal"/>
<span class="idValues" id="idVal" data-visible="=FALSE">100</span>
</td>
<td class="result">
<span class="idValues" data-formula="=IF(OBJVAL('.idValues:eq(0)') = 100, 'SUCCESS', 'FAILURE')" />
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input class="nameValues" type="input" data-formula="=nameValue"/>
<input class="nameValues" name="nameValue" data-visible="=FALSE" value="100"/>
</td>
<td class="result">
<span class="nameValues" data-formula="IF(OBJVAL('.nameValues:eq(0)') = 100, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Visible (false)</td>
<td>
<span id="not_vis" class="vis" data-visible="=FALSE"></span>
</td>
<td class="result">
<span class="vis" data-formula="=IF(not_vis.visible, 'FAILURE', 'SUCCESS')">Hide Me</span>
</td>
</tr>
<tr>
<td>Visible (true)</td>
<td>
<span id="is_vis" class="vis" data-visible="=TRUE" style="display: none;">Show Me</span>
</td>
<td class="result">
<span class="vis" data-formula="=IF(is_vis.visible, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Enabled (false)</td>
<td>
<input type="input" id="not_enabled" class="enabled" data-enabled="=FALSE" />
</td>
<td class="result">
<span class="enabled" data-formula="=IF(not_enabled.enabled, 'FAILURE', 'SUCCESS')"></span>
</td>
</tr>
<tr>
<td>Enabled (true)</td>
<td>
<input type="input" id="is_enabled" class="enabled" data-enabled="=TRUE" disabled="true"/>
</td>
<td class="result">
<span class="enabled" data-formula="=IF(is_enabled.enabled, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Loop detection</td>
<td>
<input type="input" class="loop" data-formula="=OBJVAL('.loop:eq(0)')"/>
</td>
<td class="result">
<span class="loop" data-formula="=IF(OBJVAL('.loop:eq(0)') = 'Loop Detected', 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Outside Inclusion</td>
<td>
<input type="input" class="outside" data-formula="=outside_hidden.value"/>
<input type="hidden" id="outside_hidden" value="SUCCESS"/>
</td>
<td class="result">
<span class="loop" data-formula="=IF(OBJVAL('.loop:eq(0)') = 'Loop Detected', 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Outside Inclusion From Existing Set</td>
<td>
<input type="input" class="outsideInclusion" data-formula="=idVal.value"/>
</td>
<td class="result">
<span class="outsideInclusion" data-formula="=IF(OBJVAL('.outsideInclusion:eq(0)') = 100, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
<tr>
<td>Timevalue</td>
<td>
<span class="time" data-formula="=TIMEVALUE('10:30am')"></span>
<span class="time" data-formula="=TIMEVALUE(10:30am)"></span>
<span class="time" data-formula="=TIME(10,30,0)"></span>
</td>
<td class="result">
<span class="time" data-formula="=IF(OBJVAL('.time:eq(0)') = 0.4375, 'SUCCESS', 'FAILURE')"></span>
<span class="time" data-formula="=IF(OBJVAL('.time:eq(1)') = 0.4375, 'SUCCESS', 'FAILURE')"></span>
<span class="time" data-formula="=IF(OBJVAL('.time:eq(2)') = 0.4375, 'SUCCESS', 'FAILURE')"></span>
</td>
</tr>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../plugins/globalize.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<!--optional-->
<script type="text/javascript" src="../plugins/jquery.sheet.advancedfn.js"></script>
<!--/optional-->
<!--optional-->
<script type="text/javascript" src="../plugins/jquery.sheet.financefn.js"></script>
<!--/optional-->
<script type="text/javascript" src="../jquery.pseudosheet.js"></script>
<script type="text/javascript" src="../parser/formula/formula.js"></script>
<script>
$(function() {
$('.cells').change(function() {
$('.cells').pseudoSheet();
}).change();
});
</script>
</head>
<body>
<form>
First name: <input type="text" name="firstname" id="fname" class="cells"><br>
Last name: <input type="text" name="lastname" id="lname" class="cells"><br>
<input type="radio" class="cells" name="sex" value="male">Male<br>
<input type="radio" class="cells" name="sex" value="female">Female<br>
<input type="checkbox" class="cells" name="showcar" value="showcar" id="showcar">Show car<br>
<input type="checkbox" class="cells" name="car" value="Car" id="car" data-enabled="=IF(n3>20,TRUE(),FALSE())"><span class="cells" data-visible="=showcar">text shows if chkbox Show Car is selected</span><span> -- This checkbox is only to be enabled if Z below is greater then 20</span><br>
<input type="text" name ="t2" id="t2" class="cells" data-formula="=fname+' '+lname"><br>
<span class="cells" data-formula="=IF(sex='female','female','unknown')"></span><br> <!--Need to make radio buttons set value by selected one-->
Today: <input type="text" name="tdate" id="tdate" class="cells" data-formula="=TODAY()"><br>
DOB: <input type="text" name="dob" id="dob" class="cells"><br>
<span class="cells" name="age" data-formula="=DAYSFROM(2012,1,1)" id="age"></span><br>
X: <input type="text" class="cells n" name="n1" id="n1"><br>
Y: <input type="text" class="cells n" name="n2" id="n2"><br>
Z: <input type="text" class="cells" name="n3" id="n3" data-formula="=SUM(n1,n2)"><br>
State: <select class="cells" name="state" id="state">
<option value="PA">PA</option>
<option value="NY">NY</option>
</select><br>
<span class="cells" id="team" data-formula="=IF(state='PA','Steelers',IF(state='NY','Jets','looser'))"></span><br>
<span class="cells" id="state2" data-formula="=state"></span><br>
</form>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('#sheetParent').sheet();
});
</script>
</head>
<body>
<div id="sheetParent" title="Statistical Functions">
<table title="Statistical Functions">
<tbody>
<tr>
<td class="styleBold styleCenter">Function</td>
<td class="styleBold styleCenter">Execution</td>
<td class="styleBold styleCenter">Desired Result</td>
<td class="styleBold styleCenter">Correct?</td>
<td class="styleBold styleCenter">Notes</td>
</tr>
<tr><!--average-->
<td>AVERAGE</td>
<td data-formula="=AVERAGE(1,2,3,4,5,6,7,8,9,10,100,1000,9999)"></td>
<td>858</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--max-->
<td>MAX</td>
<td data-formula="=MAX(1,2,3,4,5,6,7,8,9,10,100,1000,9999)"></td>
<td>9999</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--min-->
<td>MIN</td>
<td data-formula="=MIN(1,2,3,4,5,6,7,8,9,10,100,1000,9999)"></td>
<td>1</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
<tr><!--stdev-->
<td>STDEV</td>
<td data-formula="=STDEV(10.5,7.2)"></td>
<td>2.3334523779156067</td>
<td data-formula="=IF(THISROWCELL('B') = THISROWCELL('C'), TRUE, FALSE)"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>jQuery.sheet - The Ajax Spreadsheet</title>
<link rel="stylesheet" type="text/css" href="../jquery-ui/theme/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.sheet.js"></script>
<script type="text/javascript">
$.sheet.preLoad('../');
$(function() {
$('<div />').load('../examples/inputs.html #sheetParent table', function() {
$('#sheetParent')
.html($(this).html())
.sheet();
});
$('#button').click(function() {
$('#sheetParent').getSheet()
.toggleState();
});
});
</script>
</head>
<body>
<input id="button" type="button" value="Toggle State" />
<div id="sheetParent" title="Inputs"></div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment