Spread JS is an online Excel tabular control that features very powerful functions. The following is a brief introduction to the simple use.
The simplest form
Steps
- Refer to the relevant CSS and JS in the head section of the project file
1 <Head>2 <Linkrel= "StyleSheet"href= "Css/gc.spread.views.dataview.10.1.1.css" />3 <Scriptsrc= "Js/gc.spread.common.10.1.1.min.js"type= "Text/javascript"></Script>4 <Scriptsrc= "Js/gc.spread.views.dataview.10.1.1.min.js"type= "Text/javascript"></Script>6 <Scriptsrc= "Js/gc.spread.views.gridlayout.10.1.1.min.js"HG Type= "Text/javascript"></Script>8 <Scriptsrc= "Js/gc.spread.views.dataview.locale.zh-cn.10.1.1.min.js"></Script><!--Loaded in Chinese -Ten </Head>
2. Add a container to the main part of the page
< Body > < ID= "Grid1" class= "Grid" style= " width:100%; height:500px; " ></ Div > </ Body >
3. Prepare the data and add a JS to the page
<script type= "Text/javascript" >//Related data related to column header names vardata = [{ "Name": "Zhang San",//string to double quotation marks"Age": 22, "Gender": "Male", "Height": 192, "Hobbies": "reading", "Tel": 114, "Address": "Earth", "Character": "Cheerful", }, {"name": "John Doe", "Age": "Gender": "Female", "height": 165, "hobby": "Singing" c8>, "phone": +, "address": "Mars", "character": "Gentle"
}];
varDataView =NewGc. Spread.Views.DataView (document.getElementById ("Grid1"), data,
NewGC. Spread.Views.Plugins.GridLayout (//related additional feature settings here to add settings ));
</script>
Effect
Spread JS essay a simple form