| Spreadsheet functions are case sensitive. They must be either lower or upper (ABS(), abs(); AVERAGE(), average();), you can't user proper name (Abs(), Avg(), Hyperlink()) they will not work. |
||||||||
| Excel Function | Arguments | Example | Result | Additional Information | Sample # | Sample Text | ||
| ABS | number | "=ABS(F3)" | 23 | 23 | Hello World | |||
| AVERAGE | numbers_as_array | "=AVERAGE(F3:F13)" | 144.45454545454547 | Synonym: AVG | 45 | True | ||
| CEILING | number | "=CEILING(F3:F13)" | 2.345621082003618e+23 | 62 | False | |||
| COUNT | values_as_array | "=COUNT(F2:F13)" | 12 | 108 | To High | |||
| DAYSFROM | date | "=DAYSFROM(2009,4,15)" | -108 | 200 | To Low | |||
| DOLLAR | number | "=DOLLAR(F13)" | -$100.00 | 36 | Perfect | |||
| FALSE | "=IF(F3 < 100, TRUE(), FALSE())" | true | 17 | number | ||||
| FIXED | number, decimals, noCommas? | "=FIXED(F3+F13)" | -77.00 | Two decimal places | 99 | numbers_as_array | ||
| FLOOR | number | "=FLOOR(F3-F4)" | -22 | Synonym: INT | 100 | values_as_array | ||
| HTML | html_as_string | "=HTML("<div style='color: red; weight: bold;'>Hello World!!!</div>")" | Hello World!!! |
The value sent to the HTML function must start and end with double quotes (""). All element values must have single quotes (''). | 999 | date | ||
| HYPERLINK | url_as_string | "=HYPERLINK("http://www.jquery.com", "jQuery's website")" | jQuery's website | -100 | html_as_string | |||
| IF | IF(logical_test, value_if_true, value_if_false) | "=IF(F12 < 100, TRUE(), FALSE())" | Can have nested IF functions. | -14 | url_as_string | |||
| IMG | url_as_string | "=IMG("http://ui.jquery.com/images/logo.gif")" | ![]() |
The url can be sensitive to numbers. | ||||
| MAX | numbers_as_array | "=MAX(F3:F13)" | 999 | -21 | ||||
| MIN | numbers_as_array | "=MIN(F3:F13)" | -100 | |||||
| N | number | "=N(F3)" | 23 | |||||
| PI | "=PI()" | 3.141592653589793 | If you use "=PI" it will return the actual function as text, which is incorrect. Use "=PI()". | |||||
| TODAY | "=TODAY()" | Sun Dec 28 2008 10:27:07 GMT-0500 (Eastern Standard Time) | ||||||
| TRUE | "=TRUE() || FALSE()" | true | ||||||
| SUM | numbers_as_array | "=SUM(F2:F13)" | 1589 | |||||
| ROUND | number | "=ROUND(1.6)" | 2 | |||||
| RAND | "=RAND()" | 0.6489516688709732 | Synonym: RND | |||||
| Advanced Functionality | Example | Result | Additional Information | |||||
| Direct Javascript | "=jQuery.sheet.version" | 0.4 | The character '=' simply starts a reference to javascript. The example here interacts with the jS (or jQuery.sheet) object and calls a function that returns it's current version. | |||||
| Math.PI | "=Math.PI" | 3.141592653589793 | The Math function here is actually the javascript Math function. So in a since, you are writing javascript from the sheet. | |||||
| Self as Function | "=function(value, output) { if (isNaN(value)) { return value; } else { return output; } }" |
function (value, output) { if (isNaN(value)) { return value; } else { return output; } } | function () { return this; } | |||||
| Call a Cell as Function | As many as you like. | "=D29(F3, F4)" | 45 | The example here is calling the above cell as a function. This makes working with sheets extremely flexible. | ||||
| jQuery.sheet() Settings | Description | Default | Example |
| urlGet | The html file that is loaded into jQuery.sheet() | "documentation.html" | $(obj).sheet({ urlGet: "mySheet.html" }); |
| urlSave | The url for the sheet info to be saved at. | "save.html" | |
| editable | Makes the sheet editable. Boolean value. | true | |
| urlBaseCss | Location of the base css file used to configure the sheet. | "jquery.sheet.base.css" | |
| urlTheme | jQuery UI Themeroller css theme location used to style the sheet. | "theme/ui.theme.css" | |
| urlMenu | Loads the menu bar found at the top that uses jQuery.clickMenu(). If left blank, will not load menu. |
"menu.html" | |
| urlMenuJs | Location of the jQuery.clickMenu plugin for use with the menu control. |
"plugins/jquery.clickmenu.pack.js" | |
| urlMenuCss | Location of the jQuery.clickMenu's style file. | "plugins/clickmenu.css" | |
| urlScrollTo | Loads the plugin jQuery.scrollTo. Makes editing the sheet an absolute pleasure :). |
"plugins/jquery.scrollTo-1.4.0-min.js" | |
| loading | The loading html message when jQuery.sheet() first starts. |
"Loading Spreadsheet..." | |
| newColumnWidth | Sets the width of newly added columns. | "120px" | |
| ajaxSaveType | Sets the type of forums/ajax submit type. | "POST" | |
| buildSheet | Lets you create a new sheet. Example: '10x30' (Column count by Row count). If you use this option it cancels out urlGet. Must be separated by an "x" ("10x30") or be set to boolean false. Note: Large sheets will take some time to load. |
false |
$(obj).sheet({ buildSheet: "10x30" }); |
| calcOff | Enables or disables the sheet calculations; on loadup only. Boolean value. This usually isn't needed because the values are saved when the sheet is saved. |
false | |
| log | Enables or disables sheet log, used for debugging. Boolean value. |
false | |
| title | Overrides the sheet's sheettitle attribute. | "" | |
| lockFormulas | Turns function edit off. This protects your spreadsheet's supplied functions. Note: If you create a function, after the first edit, it will no longer be editable. |
false | |
| parent | The sheet's parent, needed for internal usage, doesn't need to change. |
this | |
| colMargin | The width and height of standard toolbars. | "25px" | |
| fnBefore | Function ran just before the sheet is initialized. | function() {} | |
| fnAfter | Function ran after the sheet is initialized and styled. | function() {} | |
| fnSave | Function used for saving the spreadsheet, default is jS.saveSheet(). | function() { jS.saveSheet(); } | |
| fnOpen | Function used to open a spreadsheet. | function() {} | |
| fnClose | Function used to close the current spreadsheet. | function() {} | |
| Regular Initialization | Initialization with Options | ||
| $(document).ready(function() { $(selector).sheet(); }); |
$(document).ready(function() { $(selector).sheet({ urlGet: "documentation.html table:first", urlSave: "save.html", title: '', editable: true, urlBaseCss: 'jquery.sheet.base.css', urlTheme: "theme/jquery-ui-themeroller.css", urlMenu: "menu.html", urlMenuJs: "plugins/jquery.clickmenu.pack.js", urlMenuCss: "plugins/clickmenu.css", urlScrollTo: "plugins/jquery.scrollTo-1.4.0-min.js", loading: 'Loading Spreadsheet...', newColumnWidth: '120px', ajaxSaveType: 'POST', buildSheet: false,//'10x30', this can be slow calcOff: false, log: false, lockFormulas: false, parent: this, colMargin: "25px", fnBefore: function() {}, fnAfter: function() {}, fnSave: function() { jS.saveSheet(); }, fnOpen: function() {}, fnClose: function() {} }); }); |
||
| jQuery.sheet Dependencies | Plugin File Name | Size (kb) | Compressed |
| jQuery | jquery-1.2.6.pack.js | 30.3 | yes |
| jQuery.clickMenu (optional) | jquery.clickmenu.js | 4.24 | yes |
| jQuery.clickMenu Style (optional) | jquery.clickmenu.css | 1.95 | no |
| jQuery.sheet | jquery.sheet.min.js | 40.5 | yes |
| jQuery.scrollTo (optional) | jquery.scrollTo-1.4.0-min.js | 1.95 | yes |
| jQuery UI - ThemeRoller style | Make your theme using jQuery UI Themeroller. This is a pack of files. Default directory for unzip is jQuery.sheet_root/theme. |
123 | yes |
| Total App Size: | 30KB | <--Note:this field is dynamic :) | |
| The below area is mainly for those that would like to really build around the sheet. I tried to be as detailed as possible. I will try to keep this as updates as possible. | |||
| jQuery.sheet Object/Function | Description | ||
| jQuery.sheet / jS | Object that holds all the functions used for jQuery.sheet (A jQuery extension, different from jQuery.sheet(), a jQuery.fn extension). |
||
| jQuery.calculationsEngine / cE | Object that holds the functions used to calculate the table as a spreadsheet. |
||
| EMPTY_VALUE | Empty object - {} | ||
| cellIsEdit | Is true when cell is being edited. | ||
| cl | Class list shorthand | ||
| getResizeControl | returns the resize function needed for a Id bar resizer. | ||
| id | Id list shorthand | ||
| obj | Object list shorthand | ||
| s | jQuery.sheet.settings shorthand | ||
| themeRoller | Themeroller object. Used for styling. | ||
| toggleHide | Not yet used, too buggy. Used for hiding and showing sheets. | ||
| version | Returns jQuery.sheet's current verison. | ||
| ERROR | The value returned when a cell fails a function. | ||
| HTMLtoCompactSource | Parses the sheet's HTML to compact source. | ||
| HTMLtoPrettySource | Parses the sheet's HTML to pretty source. | ||
| addColumn | Adds a single column. | ||
| addColumnMulti | Calls jQuery.sheet.addColumn a specified number of times. | ||
| addRow | Adds a single row. | ||
| addRowMulti | Calls jQuery.sheet.addRow a specified number of times. | ||
| barAdjustor | Runs in memory to re-adjust the position of the cell Id bars. | ||
| barHeightSync | Used in Safari/Chrome only to re-sync the rows of a spreadsheet to the size of the Id bars. | ||
| barResizer | Object that holds the functions for bar resizing. | ||
| buildSheet | Builds a table used for a spreadsheet. | ||
| calc | Function for compiling against the jQuery.calculationsEngine. | ||
| cellClick | Step 1 of the cell click function | ||
| cellEdit | Causes a click event to occur on any given cell. Usually used for arrow keys to set focus on cells. | ||
| cellEditAbandon | Takes the focus away from cells, escapes the edit process. | ||
| cellEditDone | Occurs when another cell is click to end the current cell edit session. | ||
| cellFindXY | Returns the absolute position of a cell. Mainly used to find position of element on page during row/column resize. | ||
| cellOnClick | Step 1 of the cell click function. Also detects if the formula's are locked for edit. | ||
| cellOnClickManage | Step 2 of the cell click function. On first click, sets the cell to editable. On second click it grabs the html in the cell or formula and throws it into a textarea and the textarea within the cell. | ||
| cellOnMouseDown | Makes multi selectable cells possible. When occurs, sets cellSetActiveMulti to run through it's mousemove and mouseup on document. | ||
| cellSetActive | Sets the cell Id bars and cell visually active. | ||
| cellSetActiveMulti | Works in accord with cellOnMouseDown. | ||
| cellSetActiveMultiColumn | From a column's double click event, it selects all cells within that column. | ||
| cellSetActiveMultiRow | From a row's double click event, it selects all cells within that row. | ||
| cellSetFocus | Changes the cell FX element to reflect the current cell. Focuses on the formula when done. | ||
| cellStyleToggle | Manages styles interactions. | ||
| cellTextArea | Manages leaving, and entering a textarea. Returning the most current value. Also makes the formula disabled if textarea is active. | ||
| deleteColumn | Deletes a column. | ||
| deleteRow | Deletes a row. | ||
| followMe | Used with jQuery.scrollTo plugin. Makes the pane follow the currently selected cell. | ||
| formulaKeyDown | The centralized location for most keydown events. Takes advantage of select rather than if statements to make it almost seam like nothing is capturing these event. | ||
| getCss | Simple plugin that writes a css link for those that are needed. Interacts with any url setting of jQuery.sheet. | ||
| getIndexTd | Centralized location for grabbing the cell's current "cellIndex". Mostly used with jQuery.calculationsEngine. | ||
| getIndexTr | Centralized location for grabbing the cell parent's current "rowIndex". Mostly used with jQuery.calculationsEngine. | ||
| getTd | Returns the currently selected cell from a tableBody var that's sent to it. Returns a cell very quickly. | ||
| getTdLocation | Returns an array of 2 numbers - [row, column]. | ||
| importColumn | Creates a new column, then sets their html to a value that's sent in the form of an array. | ||
| importRow | Creates a new row, then sets their html to a value that's sent in the form of an array. | ||
| log | Used for debugging. Needs to have some timing values in the futures. | ||
| makeBarItemLeft | Creates the functional Id bar to the left of the spreadsheet. | ||
| makeBarItemTop | Creates the functional Id bar to the top of the spreadsheet. | ||
| makeControls | If a cell is editable, it create the formula textarea, FX, Menu, sheetTitle. | ||
| manageHtmlToText | Converts different characters for use with formula textarea/in cell edit textarea. | ||
| manageTextToHtml | Converts from different values from the formula textarea/in cell edit textarea to HTML. | ||
| newSheet | A friendly way of letting the user create a spreadsheet. Uses a prompt for user input. | ||
| openSheet | Opens either from a url or a var a new spreadsheet. | ||
| refreshLabelsColumns | Resets all column labels. Used when adding new columns, deleting columns. | ||
| refreshLabelsRows | Resets all row labels. Used when adding new rows, deleting rows. | ||
| saveSheet | Standard function used for saving sheets. Called from jQuery.sheet.settings.fnSave(). If you have a different way that you'd like to save sheets, use the fnSave setting. | ||
| sheetClearActive | Used to clear the themeRoller classes from the cell Id bars and to set the formula textare to ''. | ||
| sheetDecorate | Set's the sheet up with top and left cell id bars as well as syncronizing sheet size in accord with that of it's parent. | ||
| sheetDecorateRemove | Returns a sheet back to normal html. | ||
| sheetInit | Very short function that put's the created instance of the spreadsheet into it's parent, styling, and bar adjuster. | ||
| sheetSyncSize | It was difficult to get main web browsers (IE, FF, Safari/Chrome) to output the spreadsheet where it needed to be, and the sizing it needed to be so it looked right. This function manages sizing. | ||
| sheetTitle | Gets/Sets the sheet's title if it's enabled. | ||
| tableCell | A prototype object for interacting with jQuery.calculationsEngine. | ||
| tableCellProvider | A prototype object for interacting with jQuery.calculationsEngine. | ||
| viewSource | A nice way of viewing source. Can be compact or pretty. |
| If you are not a programmer, just using jQuery.sheet for it's spreadsheet purposes, just ignore the "Dependency" column. |
||
| Navigation | Result | Dependancy |
| Left Arrow | Active cell moves left if possible. | jQuery.sheet.cellClick() |
| Right Arrow | Active cell moves right if possible. | jQuery.sheet.cellClick() |
| Up Arrow | Active cell moves up if possible. | jQuery.sheet.cellClick() |
| Down Arrow | Active cell moves down if possible. | jQuery.sheet.cellClick() |
| Escape | Active cell is removed from focus. | jQuery.sheet.cellEditAbandon() |
| Enter | Starts in-place edit / Active cell moves down if possible. | jQuery.sheet.formulaKeyDown() private function enter() |
| Ctrl + Enter | Ends in-place edit / Active cell moves down if possible. | |
| Tab | Active cell moves right if possible. | jQuery.sheet.cellClick() |
| Feature | Info | Dependancy |
| jQuery.sheet is Re-sizable! | Click and drag on the cell Id bars, and it will resize the row. | jQuery.sheet.barResizer() |
| Auto Scroll | When you navigate to a cell the spreadsheet pane automatically scrolls to it. | jQuery.scrollTo plugin |
| Multi cell select | If you drag your mouse over a range of cells, it will select them for you. You can use this to change their style. | jQuery.sheet.cellSetActiveMulti() |
| Multi cell select from cell Id bars | Double click on the mouse Id bars and it will select the range of cells associated with it. | jQuery.sheet.cellSetActiveMultiColumn() or jQuery.sheet.cellSetActiveMultiRow() |
| Add Row | Adds a row to the bottom of your spreadsheet. | jQuery.sheet.addRow() |
| Insert Row | Inserts a row just below the currently selected row. | jQuery.sheet.addRow() |
| Add Multi Row | Adds multiple rows to the end of the spreadsheet. | jQuery.sheet.addRowMulti() |
| Delete Row | Deletes the currently selected row. | jQuery.sheet.deleteRow() |
| Add Column | Adds a column to the last column of the spreadsheet. | jQuery.sheet.addColumn() |
| Insert Column | Insert column just after the currently selected column. | jQuery.sheet.addColumn() |
| Add Multi Column | Adds multiple columns to the last column in the spreadsheet. | jQuery.sheet.addColumnMulti() |
| Delete Column | Delete the currently selected spreadsheet. | jQuery.sheet.deleteColumn() |
| Style cells | Cells are styleable. | jQuery.sheet.cellStyleToggle() |
| Support of jQuery UI theme | You make the spreadsheet look like you want. Pick your theme here: http://ui.jquery.com/themeroller | jQuery UI Theme / jQuery.sheet.themeRoller |
| Sheet Title | You can change the sheet's title. | jQuery.sheet.sheetTitle() |
| jQuery.sheet | A jQuery Spreadsheet with Calculations | jQuery.sheet on jQuery's Website |
| Version | 0.4 | |
| Written By | Robert Plummer | My jQuery Project Website |
| Written Using | Notepad++ | |
| Compressed Using | YUI Compressor | |
| Compatibility | Firefox 3, IE 7, Chrome, Safari | |
| About Me | Professional Services | |
| Bugs? | Bugs Page | |
| Want to see a feature added? | Features Page | |
| Need support? | Support Page | |