Spread JS 隨筆一 簡單表格
阿新 • • 發佈：2017-05-12
exc layout shee 年齡 工程 dataview .get avi text
Spread JS 是一個在線Excel表格控件，功能非常強大。下面大概的介紹一下簡單的使用。
最簡單的表格
步驟
- 在工程文件中的head 部分引用相關的css 和js
1 <head> 2 <link rel="styleSheet" href="CSS/gc.spread.views.dataview.10.1.1.css" /> 3 <script src="JS/gc.spread.common.10.1.1.min.js" type="text/javascript"></script>4 <script src="JS/gc.spread.views.dataview.10.1.1.min.js" type="text/javascript"></script> 6 <script src="JS/gc.spread.views.gridlayout.10.1.1.min.js" hg type="text/javascript"></script> 8 <script src="JS/gc.spread.views.dataview.locale.zh-CN.10.1.1.min.js"></script><!--加載中文的--> 10 </head>
2. 在頁面主體部分添加一個容器
<body> <div id="grid1" class="grid" style=" width:100%; height:500px;"></div> </body>
3. 準備好數據，在頁面添加一個JS
<script type="text/javascript"> //相關的列頭名 相關數據 var data = [{"姓名": "張三", //字符串要加雙引號 "年齡": 22, "性別": "男", "身高": 192, "愛好": "看書", "電話": 114, "住址": "地球", "性格": "開朗", }, { "姓名": "李四", "年齡": 34, "性別": "女", "身高": 165, "愛好": "唱歌", "電話": 100, "住址": "火星", "性格": "溫柔"
}];
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data,
new GC.Spread.Views.Plugins.GridLayout( //相關的其他功能設置在此添加設置 ));
</script>
效果如圖：
Spread JS 隨筆一 簡單表格