Spreadjs electronic Form

Spreadjs is a HTML5 spreadsheet control under Wijmo.

Official website: http://wijmo.com/products/spreadjs/

Here is a simple collation of Spreadjs a few relatively simple features, as follows:

1. Spreadjs Supported Browsers

1) Microsoft IE10

2) Microsoft IE9

3) Mozilla FireFox

4) Safari

5) Google Chrome

2. Using the Spreadjs step

1) Add a reference to jquery, Spreadjs script, and style sheet

　        <!--jQuery references--> <script src= "http://code.jquery.com/jquery-1.9.1.min.js" type= "Text/javascript" & gt;</script> <script src= "http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type= "Text/javascript" > </script> <!--theme--> <link href= "http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel= "sty Lesheet "type=" Text/css "/> <!--spreadjs Widgets javascript--> <script src=" http://cdn.wijmo.com/s Preadjs/jquery.wijmo.wijspread.all.1.20133.8.min.js "type=" Text/javascript "></script> <!--Spreadjs Widgets css--> <link href= "Http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20133.8.css" rel= " Stylesheet "type=" Text/css "/>

2) Generating HTML markup

<div id= "ss" style= "width:100%;height:400px;" ></div>

3) initialize the spreadsheet

 <script type= "Text/javascript" > $ (document). Ready ( function  " #ss "). Wijspread ({sheetcount:1}); //  create Wijspread control  var spread = $ ("#ss"). Wijspread ("spread"); //        　　　　 Get instance of Wijspread control  var  sheet = spread.getactivesheet (); //  get active worksheet of the Wijspread control  //  initializing the active worksheet here ... 　　　　　　　　});  </script> 

3. Spread Charting a solution

1) Sparkline

Draw a chart on a single cell

function Setsparkline (   row:number,   col:number,  datarange:range,   Dataorientation:datao Rientation,   Sparklinetype:sparklinetype,   sparklinesetting:sparklinesetting,   dateaxisrange: Range,   dateaxisorientation:dataorientation): Sparkline;

Cons: There are only three types of sparkline:

Member	Description
Column	Specifies the column sparkline.
Line	Specifies the line sparkline.
Winloss	Specifies the Win-loss sparkline.

2) Sparklineex

You can draw a chart by formula within a range of specified cells

Sheet.setformula (i, 4, ' =cascadesparkline (C2:C17, ' + i + ', b2:b17,,, "#8CBF64", "#D6604D", false) ');

Pros: You can have multiple chart types

Charts can be plotted across multiple cells

Cons: Charts can only be drawn with formulas

There are not enough types of charts to dynamically display

3) Floating Objects

After you add a floating object by adding the HTML element specified in the floating object, draw the chart in the embedded div:

　var div = document.createelement (' div ');　　　　Div.setattribute ("id", "div1"= "<div id= ' mychart ' >button<div/>";　　　　Customfloatingobject.content (DIV); $ (div). Highcharts ... (Omit Highcharts use method here);

Pros: You can use a variety of chart controls that embed floating objects to draw a chart

Cons: There's no way to freely scale.

4. Spreadjs Lazy Loading scenarios:

There are no scenarios where script lazy loading has been found

5. Spreadjs Support Internationalization

$.wijmo.wijspread.cultureinfo has default internationalization variables that can be identified as individual culture, support custom culture, and set this culture's variables

6. Spreadjs support Knockout (KO) technology

Knockoutjs is a JavaScript library that uses the MVVM pattern, allowing bidirectional data binding to enable real-time interactive updates of data and UI interfaces.

1) Add the latest jQuery reference, Wijmo plugin, Knockout. js file and KO about Wijmo extension files.

2) Create ViewModel and View: Add JavaScript to define data and UI behavior. Create a tag to create a view view that interacts with the UI.

3) Bind Spreadjs plug-in to ViewModel and KO.

7. You can use the Spreadjs Designer designer, which has the following main features:

1) Import and export Ssjson, XLS, CSV and other files

2) can be saved as JS file

3) Load, save schema (JSON format)

4) Manipulate documents like Excel, edit cells, move cells, font, color, style, align

5) Add Sparkline Chart, table, picture

6) Design Report formula

7) Table condition filtering, sorting

8. Shrink adaptive cell shrink to Fit

Scale a longer field on a single cell to fit the cell length

9. Support Typescript

Adding Wijmo.wijspread.d.ts and Jquery.d.ts, you can intelligently perceive

10. Support for data validation

1) createdatevalidator
2) Createformulavalidator
3) Createformulalistvalidator
4) Createlistvalidator
5) Createnumbervalidator
6) Createtextlengthvalidator

Spreadjs electronic Form