1. 程式人生 > >Spread JS 隨筆一 簡單表格

Spread JS 隨筆一 簡單表格

exc layout shee 年齡 工程 dataview .get avi text

Spread JS 是一個在線Excel表格控件,功能非常強大。下面大概的介紹一下簡單的使用。

  最簡單的表格

  步驟

  1. 在工程文件中的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 隨筆一 簡單表格