SpreadJS电子表格

    xiaoxiao2021-03-26  31

    演示地址:http://www.gcpowertools.com.cn/products/spreadjs/demo.htm

    SpreadJS是wijmo旗下的一款HTML5电子表格控件。

    官方网址:http://wijmo.com/products/spreadjs/

     

    在这里简单整理了SpreadJS几个比较简单的特点,如下:

    SpreadJS所支持的浏览器

               1) Microsoft IE10

        2) Microsoft IE9

        3) Mozilla FireFox

        4) Safari

        5) Google Chrome

    使用SpreadJS步骤

          1)添加Jquery、SpreadJS脚本以及样式表的引用

      <!--jQuery References-->       <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>       <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>       <!--Theme-->       <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />       <!--SpreadJS Widgets JavaScript-->        <script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.1.20133.8.min.js" type="text/javascript"></script>       <!--SpreadJS Widgets CSS-->       <link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20133.8.css" rel="stylesheet" type="text/css" />

          2) 生成HTML标记

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

          3) 初始化电子表格

      <script type="text/javascript">       $(document).ready(function(){     $("#ss").wijspread({sheetCount:1}); // create wijspread control     var spread = $("#ss").wijspread("spread"); // get instance of wijspread control     var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread control     // initializing the active worksheet here...        });         </script> Spread绘制图表解决方案

        1)  SparkLine

        对单个单元格绘制图表

    function setSparkline(     row : number,     col : number,      dataRange : Range,     dataOrientation : DataOrientation,     sparklineType : SparklineType,     sparklineSetting : SparklineSetting,     dateAxisRange : Range,     dateAxisOrientation : DataOrientation       ) : Sparkline;

          缺点:Sparkline只有三种类型:

    Member

    Description

    column

    Specifies the column sparkline.

    line

    Specifies the line sparkline.

    winloss

    Specifies the win-loss sparkline.

        2)  SparkLineEx

        可以在指定单元格区域内通过公式来绘制图表

    sheet.setFormula(i, 4, '=CASCADESPARKLINE(C2:C17,' + i + ',B2:B17,,,"#8CBF64","#D6604D",false)');

        优点:可以有多种图表类型

        可以跨多个单元格绘制图表

        缺点:只能通过公式来绘制图表

              图表的种类不够多,不能动态展示

        3)  Floating Objects

        通过添加浮动对象中指定的HTML元素,添加完浮动对象后,在嵌入的div中绘制图表:

     var div = document.createElement('div');     div.setAttribute("id", "div1");     div.innerHTML = "<div id= 'myChart'>button<div/>";     customFloatingObject.Content(div);     $(div).highcharts......(此处省略highcharts使用方法);

        优点:可以使用多种嵌入浮动对象的图表控件绘制图表

        缺点:目前没找到可以自由伸缩的方法

    SpreadJS懒加载方案:

          目前尚未发现脚本懒加载的方案

    SpreadJS支持国际化

          $.wijmo.wijspread.CultureInfo中有默认的国际化变量,可以识别为各个culture,支持自定义culture以及设定此culture的变量

    SpreadJS 支持 Knockout (KO)技术

    KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新。

                 1) 添加最新的 jQuery 引用, Wijmo 插件, Knockout .js 文件和 KO 关于 Wijmo 的扩展文件。

          2) 创建 ViewModel 和 View:添加 JavaScript 定义数据和 UI 行为。创建标记创建 View 视图,可交互的UI。

          3) 绑定 SpreadJS 插件到 ViewModel 和 KO.

    可以使用SpreadJS Designer设计器,设计器主要有以下功能:

          1) 导入导出ssjson、xls、csv等文件

          2) 可以保存为js文件

          3) 加载、保存schema(json格式)

          4) 像excel一样操作文档,编辑单元格,移动单元格,字体、颜色、样式、对齐

          5) 添加sparkline图表、table、Picture

          6) 设计报表公式

          7) 表条件过滤、排序

    缩小自适应单元格Shrink to Fit

          对单个单元格的较长字段缩放以自适应单元格长度

    支持typescript

          添加wijmo.wijspread.d.ts 和 jquery.d.ts,可以智能感知

    支持数据验证

          1)    createDateValidator       2)    createFormulaValidator       3)    createFormulaListValidator       4)    createListValidator       5)    createNumberValidator       6)    createTextLengthValidator

     

    转载请注明原文地址: https://ju.6miu.com/read-663864.html

    最新回复(0)