Demo
SpreadJS Demo
Doc
API
more
download
SpreadJS Demo
SpreadJS Demo
Features
Editing
Quote Prefix
Home
Quick Start
Showcase
Business Dashboard
Financial KPIs
Aging Report
Income Statement
Expense Budget
1040 Tax Form
Gradebook Dashboard
Cook Book
Profit Loss Projection
What If Analysis Template
Airplane Seating Chart
Shape Operation Workflow
Billing Invoice
Annual Financial Report
Retail Metrics Report
Features
Workbook
Initialize Spread
Spreadsheet View
Tab Strip
Scrollbars
View Background
Spread Painting
Events
JSON Serialization
Data Source Serialization
Custom Item Serialization
Hit Test
Pixel Scrolling
Split Resize
Worksheet
Initialize Sheet
Borders and Gridlines
Visibility
Zoom
Headers
Rows and Columns
Dynamic size
Cell Basic
Merging Cells
Frozen Lines and Viewport
Data
Formulas
Selection
Actions
Update Actions
Custom Action
Protection
Events
Painting
Outline Column
Style
Introduction
Font
Cell Padding and Label
Cell Buttons
Cell Drop-downs
List
TimePicker
MonthPicker
Date Time Picker
Slider
Calculator
ColorPicker
Workflow List
Text Orientation
Cell Type
Introduction
Button
Checkbox
Combobox
Hyperlink
Radio List
Checkbox List
ButtonList
Custom
Custom Header
Range Template
Cell States
Introduction
Cell States Priority Ordering
Calculation
Basic Functions
Indirect Function
Function Wildcards
Custom Functions
Async Function
Array Formulas
Using Array Formulas
Language Packages
AGGREGATE Function
Dynamic Array
Introduction
FILTER Function
RANDARRAY Function
SEQUENCE Function
SORT Function
SORTBY Function
UNIQUE Function
@ Operator
Data Binding
Sheet
Cell
Table Binding
Editing
Navigation
Dirty Items
Copy Paste Excel Style
Paste Extended Range
Copy Paste Enhancement
Quote Prefix
AutoMerge
Column Auto Merge
Range Auto Merge
Header Auto Merge
Formatter
Introduction
Custom Formatter
Accounting Formatter
Shape
Introduction
Basic Shape
Connector Shape
Group Shape
Custom Shape
Shapes With Formulas
Chart
Introduction
Customization
Axis
Legend
Chart Area
Hover
Trendline
Error Bars
Column Chart
Line Chart
Pie Chart
Area Chart
Bar Chart
XYScatter Chart
Stock Chart
Combo Chart
Radar Chart
Sunburst Chart
Treemap Chart
Table
Introduction
Custom Table
Table Operator
Binding Ehancement
Table Behavior
AutoExpand
ContextMenu
Fixed Scrolling Table Headers
Resize Handler
Table with Conditional Format and Data Validation
Selection
Tab Navigation
Total Row
Styles
Conditional Format
Introduction
Conditional Rules
Data Validation
Introduction
Custom Validation
Fill
Introduction
Custom Fill
Filter
Introduction
Filter Dialog
Filter Action
Custom Filters
Outline
Introduction
Customization
Appearance
Comments
Introduction
Settings
Actions
Events
Sparklines
Introduction
Custom Sparklines
Settings
Cascade
BoxPlot
Bullet
HBar and VBar
Pareto
Pie
Area
Scatter
Spread
Stacked
Vari
Compatible
Custom SparklineEx
Month
Year
Rich Text
Introduction
BarCode
Introduction
QR Code
Data Matrix
PDF417
EAN13
EAN8
Codabar
CODE39
CODE93
CODE128
GS1-128
CODE49
Status Bar
Introduction
Custom Status Bar
Search
Introduction
Floating Objects
Introduction
Customization
Picture
Fixed Position
Actions
Events
NameInfo
Introduction
Slicer
Introduction
Settings
General Slicer Data
Table Slicer Data
Item Slicer
Chart Slicer
Tree Slicer
Aggregation Slicer
Student Slicer
Amazon Slicer
Formula Text Box
Introduction
Range Select
Tags
Introduction
Actions
Search
Excel Import Export
Excel IO
PDF Export
Introduction
Custom PDF Export
Custom Font PDF Export
Printing
Introduction
Custom Printing
Context Menu
Introduction
Custom MenuView
Extended Context Menu
Touch
Introduction
Touch Toolstrip
Theme
Document Theme
External Theme
Spread Theme
Culture
Localization
Custom Localization
Globalization
Quote Prefix
Theme:
Default
Excel 2013darkGray
Excel 2013lightGray
Excel 2013white
Excel 2016colorful
Excel 2016darkGray
Excel 2016black
Just like Excel, SpreadJS supports the quote prefix feature.
<p>When you input values using the quote prefix <strong>'</strong>, then the input value will be converted and stored as a string.</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initFunction(spread); }; function initFunction(spread) { var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('formulaBar')); fbx.workbook(spread); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setColumnWidth(1, 100); sheet.setColumnWidth(2, 300); sheet.setValue(1, 0, 'Sample:'); sheet.setValue(2, 1, 'Normal'); sheet.setValue(3, 1, 'Quote Prefix'); var value = new Date(); spread.commandManager().execute({ cmd: "editCell", sheetName: "Sheet1", row: 2, col: 2, newValue: "12" }); spread.commandManager().execute({ cmd: "editCell", sheetName: "Sheet1", row: 3, col: 2, newValue: "'12" }); spread.commandManager().execute({ cmd: "editCell", sheetName: "Sheet1", row: 4, col: 2, newValue: value }); sheet.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="formulaBar" contenteditable="true" spellcheck="false" style="border: 1px solid grey; height: 21px; width: 100%; overflow: hidden; font-size: 13px; font-family: arial, sans, sans-serif; margin-bottom: 3px; padding-top: 3px; padding-bottom: 3px"></div> <div id="ss" style="width:100%; height:100%; border: 1px solid gray;"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }