V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

在线 excel 开发之新人学习笔记——工作簿

  •  
  •   powertoolsteam · 2019-03-26 14:18:07 +08:00 · 1356 次点击
    这是一个创建于 2053 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端页面中经常需要使用到表格控件,为方便表单的设计填报,今天尝试使用一款纯前端表格控件。

    控件下载地址: https://www.grapecity.com.cn/developer/spreadjs

    免费在线版 Excel: https://demo.grapecity.com.cn/spreadjs/excel-online/content/index.html

    首先初始化 Spread

    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
    

    此时,页面中表格已经出现。 通过以下方法可以增加,清空,删除表单:

    /*------------------Spread 表单--------------------------*/
        spread.addSheet(0);  
        console.log(spread.getSheetCount()); // 3
        spread.setSheetCount(1);
        console.log(spread.getSheetCount()); // 3 初始化时创建了两个
        var sheet = spread.getSheet(0);
        var sheet1 = spread.getSheetFromName('Sheet3'); 
        console.log (sheet == sheet1);  // 结果:True,此时我页面的 索引为 0 的 sheet 名字叫 Sheet3
        // spread.removeSheet(0); 
        // spread.clearSheets(); // 清空了,一片空白
        spread.setSheetCount(4);
        console.log(spread.getActiveSheetIndex()); // 获取活动表单索引
    spread.setActiveSheetIndex(3); // 设置活动表单
    

    通过一下方法可以控制 表单,标签的一些显示,标签名称背景色等

    /*------------------表单名称标签--------------------------*/
        // spread.options.tabStripVisible = false; // 标签条 显示控制
        // spread.options.newTabVisible = false;
        var curSheet = spread.getActiveSheet();
        //curSheet.options.sheetTabColor = 'blue'; // 设置当前 sheetTab 背景颜色,
        spread.options.tabEditable = true; // 双击是否可修改表单名称
        spread.options.allowSheetReorder = false; // 是否可通过拖拽调整表单顺序
        // spread.startSheetIndex(1); // 设置起始的 sheet 的索引
        spread.options.tabStripRatio = 0.8; // 设置 TabStrip 的宽度,取值 0-1
    

    滚动条的相关设置

    //horizontal,vertical ; both ; none 拖动滚动条给出提示,默认 none
        spread.options.showScrollTip = GC.Spread.Sheets.ShowScrollTip.horizontal; 
        spread.options.showVerticalScrollbar = true; // 控制水平或竖直滚动条是否显示 showVerticalScrollbar,showHorizontalScrollbar 
        spread.options.scrollbarShowMax = true; // 是否基于表单全部的行列总数显示滚动条
        spread.options.scrollbarMaxAlign = true; //滚动条末尾是否对齐视图中表单的最后一行或一列
    

    背景

    //        spread.options.backColor = 'red';
        //spread.options.backgroundImage = 'img/bag.jpg';  //同时设置,图片优先
        //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.stretch; //stretch,center,zoom,none
        spread.options.grayAreaBackColor = 'red';// 配合 spread.options.scrollbarMaxAlign = false 使用
    

    Spread 事件

    var activeSheetChanged = GC.Spread.Sheets.Events.ActiveSheetChanged;
        spread.bind(activeSheetChanged,function(){
                console.log('activeSheetChanged');
        })
        // spread.suspendEvent(); // 暂停触发事件
        // spread.resumeEvent();  // 恢复触发事件
        var SelectionChanging = GC.Spread.Sheets.Events.SelectionChanging;
        spread.bind(SelectionChanging,function(){
                console.log('SelectionChanging');
        })
        var CellClick = GC.Spread.Sheets.Events.CellClick;
        spread.bind(CellClick,function(){
                console.log('CellClick');
        })
        var SelectionChanged = GC.Spread.Sheets.Events.SelectionChanged;
        spread.bind(SelectionChanged,function(){
                console.log('SelectionChanged');
        })
        var EditStarting = GC.Spread.Sheets.Events.EditStarting;
        spread.bind(EditStarting,function(){
                console.log('EditStarting');
        })
        var EditEnded = GC.Spread.Sheets.Events.EditEnded;
        spread.bind(EditEnded,function(){
                console.log('EditEnded');
        })
    
    2 条回复    2019-03-27 08:50:50 +08:00
    doraemon0711
        1
    doraemon0711  
       2019-03-26 16:44:57 +08:00
    Spread 这东西我记着当初用的时候碰上了一堆坑,不过时 winform 版的,web 版就不清楚了
    powertoolsteam
        2
    powertoolsteam  
    OP
       2019-03-27 08:50:50 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4217 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 04:08 · PVG 12:08 · LAX 20:08 · JFK 23:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.