| jQuery.sheet() Settings | Description | Default | Example |
| urlGet | The url of the table that is loaded into jQuery.sheet() | documentation.html table:first | $(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.css | |
| urlTheme | jQuery UI Themeroller css theme location used to style the sheet. | theme/jquery-ui-1.7.2.custom.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/mbMenu.min.js | |
| urlMenuCss | Location of the jQuery.clickMenu's style file. | plugins/menu.css | |
| urlScrollTo | Loads the plugin jQuery.scrollTo. Makes editing the
sheet an absolute pleasure :). | plugins/jquery.scrollTo-min.js | |
| loading | The loading html message when
jQuery.sheet() first starts. | Loading Spreadsheet... | |
| newColumnWidth | Sets the width of newly added columns. | 120 | |
| 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. | 18 | |
| fnBefore | Function ran just before the sheet is initialized. | function () {
} | |
| fnAfter | Function ran after the sheet is initialized and styled. | function () {
jS.obj.formula().focus().select();
} | |
| 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.css',
urlTheme: "theme/jquery-ui-1.7.2.custom.css",
urlMenu: "menu.html",
urlMenuJs: "plugins/mbMenu.min.js",
urlMenuCss: "plugins/menu.css",
urlMetaData: "plugins/jquery.metadata.js",
urlScrollTo: "plugins/jquery.scrollTo-min.js",
urlScrollsync: 'plugins/scrollsync.js',
urlJGCharts: 'plugins/jgcharts.pack.js',
loading: 'Loading Spreadsheet...',
newColumnWidth: 120,
ajaxSaveType: 'POST',
buildSheet: false,//'10x30', this can be slow
calcOff: false,
log: false,
lockFormulas: false,
parent: this,
colMargin: 18, //If text size make cell bigger than this number the bars will be off on loadtime
fnBefore: function() {},
fnAfter: function() {
jS.obj.formula().focus().select();
},
fnSave: function() { jS.saveSheet(); },
fnOpen: function() {},
fnClose: function() {},
joinedResizing: false //this joins the column/row with the resize bar
});
}); | | |
| | | |
| jQuery.sheet Dependencies | Plugin File Name | Size (kb) | Compressed |
| jQuery | jquery-1.3.2.min.js | 56 | yes |
| jQuery.sheet | jquery.sheet.min.js | 42 | yes |
| jQuery.sheet Style Sheet | jquery.sheet.css | 5 | no |
| jQuery UI - ThemeRoller style | Make your theme using jQuery UI
Themeroller. This is a pack of files. | 61.9 | yes |
| (MB)Menu (optional plugin) | plugins/mbMenu.min.js | 14 | yes |
| (MB)Menu Style Sheet (optional plugin) | plugins/menu.css | 4 | yes |
| jQuery.metaData (A dependency of (MB)Menu) | plugins/jquery.metadata.js | 4 | yes |
| Menu Html | menu.html | 8 | yes |
| jQuery.scrollTo (optional plugin) | plugins/jquery.scrollTo-min.js | 3 | yes |
| jQCharts - jQuery Google Charts Plugin (optional plugin) | plugins/jgcharts.pack.js | 6 | yes |
| scrollsync (optional plugin) | plugins/scrollsync.js | 3 | yes |
| Total App Size: | 207KB | <--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.fn.sheet(), a jQuery extension). | | |
| jQuery.calculationsEngine / cE | Object that holds the functions used to
calculate the table as a spreadsheet. | | |
| EMPTY_VALUE | Empty object - {} | | |
| cellIsEdit | Is true on the first keydown for a cell edit. Makes cell navigation very speedy! | | |
| 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. Somewhat buggy, was
included from trimpath. You should use jS.obj.pane().html() if you want the
sheet as html. | | |
| HTMLtoPrettySource | Parses the sheet's HTML to pretty source. Somewhat buddy, see above... | | |
| addColumn | Adds a single column. Accepts atColumn (int) & insertBefore (bool) | | |
| addColumnMulti | Calls jQuery.sheet.addColumn a specified number of times. | | |
| addRow | Adds a single row. Accepts atRow (int) & insertBefore (bool) | | |
| addRowMulti | Calls jQuery.sheet.addRow a specified number of times. | | |
| barAdjustor | Runs in memory to re-adjust the position of the cell Id bars. Still in code
but will only run if plugin scrollsync isn't used. | | |
| barResizer | Object that holds the functions for bar resizing. | | |
| buildSheet | Returns a jQuery object of a table.
Accepts size (string) example: "10x100" - or 10 columns by 100 rows. | | |
| calc | Function for compiling against the jQuery.calculationsEngine. | | |
| cellClickFn | Decides which cellClick Function to use depending on
jQuery.sheet.settings.lockFormulas - between
jQuery.sheet.cellOnClickLocked() or jQuery.sheet.cellOnClickReg() | | |
| cellClick | Enforces a cell click on a specified cell. Accepts keyCode (int). This is really for inplace arrow navigation and to make editing easier when a user presses enter. Fires on keydown. | | |
| cellEdit | Causes a cell to enter into an edit mode. accepts td (jQuery 'td' object) | | |
| cellEditAbandon | Takes the focus away from cells, escapes the edit process. Sets the current cell to A1. | | |
| cellEditDone | Occurs when cell focus is lost. Decides if the sheet should recompile. Accepts bsheetClearActive (bool). | | |
| cellOnClickReg /cellOnClickLocked | Step 1 of the cell click function. Accepts evt (jQuery click event). | | |
| 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. Accepts td (jQuery 'td' Object). | | |
| cellOnMouseDown | Makes multi selectable cells possible. When occurs, sets
cellSetActiveMulti to run through it's mousemove and mouseup on
document. Accepts evt (jQuery mousedown event). | | |
| cellSetActive | Sets the cell Id bars and cell visually active. Accepts td (jQuery 'td' object),
loc (Array [row, col]). | | |
| cellSetActiveMulti | Works in accord with cellOnMouseDown. For use with styling the cells.
Accepts evt (jQuery mousedown event). | | |
| cellSetActiveMultiColumn | From a column's double click event, it selects all cells within that column.
Accepts i (int) of selected column. | | |
| cellSetActiveMultiRow | From a row's double click event, it selects all cells within that row.
Accepts i (int) of selected row. | | |
| cellStyleToggle | Manages all styles interactions.
Accepts setClass (string) & removeClass (string). | | |
| cellTextArea | Manages leaving, and entering a textarea. Returning the most current
value. Also makes the formula disabled if textarea is active.
Accepts td (jQuery 'td' Object), returnVal (bool), makeEdit (bool), setVal (var). | | |
| deleteColumn | Deletes currently selected column. | | |
| deleteRow | Deletes currently selected 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.
Accepts e (jQuery keydown event). | | |
| getCss | Simple plugin that writes a css link for those that are needed. Interacts
with any url setting of jQuery.sheet.
Accepts url (string). | | |
| getIndexTd | Mostly used with jQuery.calculationsEngine. | | |
| getIndexTr | 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.
Accepts tableBody (DOM sheet object), row (int), col (int). | | |
| getTdLocation | Returns an array of 2 numbers - [row, column].
Accepts td (jQuery 'td' Object). | | |
| importColumn | Creates a new column, then sets their html to a value that's sent in the
form of an array.
Accepts columnArray (Array) of values for each cell. | | |
| importRow | Creates a new row, then sets their html to a value that's sent in the form of
an array.
Accepts rowArray (Array) of values for each row. | | |
| log | Used for debugging. Needs to have some timing values in the futures.
Accepts msg (var). | | |
| makeBarItemLeft | Creates the functional Id bar to the left of the spreadsheet.
Accepts url (string) to detect how the sheet was imported. | | |
| makeBarItemTop | Creates the functional Id bar to the top of the spreadsheet.
Accepts url (string) to detect how the sheet was imported. | | |
| makeControls | If a cell is editable, it create the formula textarea, FX, Menu, sheetTitle.
Accepts parent (jQuery Object). | | |
| 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 | This prompts the user for a value of sheet size. | | |
| openSheet | Centralized location for all sheet traffic. | | |
| 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 & syncronizing sheet size in accord with that of it's
parent. | | |
| sheetDecorateRemove | Returns a sheet back to normal html. | | |
| sheetSyncSizeToCols / sheetSyncSizeToDivs | Syncs the actual sheet size from it's columns or from the resizing bars
(div's). | | |
| 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. | | |
