如何快速使用SpreadJS创建表格

作者:控件中国网   出处:控件中国网   2015-09-24 14:22:55   阅读:6

SpreadJS是一款功能强大的JavaScript控件,开发人员可以利用该产品快速创建出跨平台、浏览器的表格应用程序,下面简单介绍如何使用该产品创建一个空白表格,具体步骤如下:

1. Spread 初始化需要以下文件:

gcSpread.sheets.x.xx.xxxxx.x.css

jquery-1.8.2.min.js

gcSpread.sheets.all.x.xx.xxxxx.x.min.js

2. 将 gcSpread.sheets.x.xx.xxxxx.x.css, jquery-1.8.2.min.js, 以及 gcSpread.sheets.all.x.xx.xxxxx.x.min.js 文件加入到 HTML 文档 Head 部分并给予其对应路径。此外, SpreadJS 还依赖第三方 jQuery 类库。例如:

<!DOCTYPE html>

<html>

   <head>

      <link href='gcSpread.sheets.x.xx.xxxxx.x.css' rel='stylesheet' type='text/css'/>

      <script src='jquery-1.8.2.min.js' type='text/javascript'></script>

      <script src='gcSpread.sheets.all.x.xx.xxxxx.x.min.js' type='text/javascript'></script>

      <script type='text/javascript' charset='utf-8'>

      ...

      </script>

   </head>

   <body>

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

   </body>

</html>

3. Spread 控件通过 new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 }) 函数进行初始化, 并且 Spread ( 以下简称 SpreadJS 控件为 'Spread') 被添加到 id 为 'ss' 的 Div 元素中。你可以通过函数 var Spread = $('#ss').data('Spread') 获取 Spread对象实例。然后, 你就可以定制你的 Spread 了。 例如:

$(document).ready(function () {

   var Spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });

   // get Spread object

   // var Spread = $('#ss').data('Spread');

});

<a href=http://www.componentcn.com/kongjianchanpin/yonghujiemian/biaogekongjian/2014-08-28/77.html target=_blank class=infotextkey>Spread</a>Js.png
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat