获取Spread

SpreadJS是Spread产品大家庭的一款表单控件。深受用户喜爱的功能有公式引擎、数据排序、筛选、输入、迷你图、原生支持Excel导入导出,等等。按照如下步骤,添加Spread到一个工程,绑定数据,然后设置外观样式。

步骤

  1. SpreadJS不依赖任何第三方组件。它只需要引用下列文件:gc.spread.sheets.xx.x.x.css,gc.spread.sheets.all.xx.x.x.min.js。
    <  link rel="styleSheet" href="gc.spread.sheets.xx.x.x.css"  /   >
    < script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript">  < /script>
                                
  2. 在页面的body元素中添加一个DOM元素作为它的容器。
    < div id="ss" style="width:100%; height:360px;border: 1px solid gray;">  < /script>
                                
  3. 用代码“new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })”来初始化Spread。
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    };
                                

绑定数据

这一步,为SpreadJS添加数据。数据源中的数据会被显示在单元格中。

步骤

  1. 添加数据到SpreadJS很简单。使用getSheet方法得到你想要操作的工作表。用代码“new GC.Spread.Sheets.Bindings.CellBindingSource(person);”创建数据源。然后使用setBindPath方法在指定区域的单元格设置要绑定的字段。再然后使用setDataSource方法来设置数据源。
    var sheet = spread.getSheet(0);
    var person = { name: 'Wang feng', age: 25, gender: 'Male', address: { postcode: '710075' } };
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
    sheet.setBindingPath(2, 2, 'name');
    sheet.setBindingPath(3, 2, 'age');
    sheet.setBindingPath(4, 2, 'gender');
    sheet.setBindingPath(5, 2, 'address.postcode');
    sheet.setDataSource(source);
                                    

设置样式

初始化和绑定数据之后,数据已经展示在Spread.Sheets中了。这一步,设置样式,使得Person Card更具吸引力、更规范。

步骤

  1. 为前面绑定的数据设置样式,让数据更直观。添加标题“Person Card”,并使用addSpan方法扩展这个单元格。然后调整列宽。为Person Card单元格添加合适的样式,比如背景色,字体颜色,边框样式和颜色,水平对齐,等等。 sheet.getCell(2,1).text("Name");
    sheet.getCell(2,1).text("Name");
    sheet.getCell(3,1).text("Age");
    sheet.getCell(4,1).text("Gender");
    sheet.getCell(5,1).text("Address.Postcode");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 1, 2).text("Person Card")
    sheet.setColumnWidth(1, 120);
    sheet.setColumnWidth(2, 120);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(20, 140, 1218)")
    sheet.getRange(2, 1, 4, 1).backColor("rgb(169, 238, 243)")
    sheet.getRange(2, 2, 4, 1).backColor("rgb(247, 197, 113)")
    sheet.getRange(1, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
    });
    sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);