• 从零开始,SpreadJS 新人学习笔记(第二周)


    Hello,大家好,我是Fiona。经过上周的学习,我已经初步了解了SpreadJS的目录结构,以及如何创建Spread项目到我的工程目录中。>>还不知如何开始学习SpreadJS的同学,可以点击这里

    本周,我会继续深入学习SpreadJS,也希望我的学习笔记能够帮助更多刚接触SpreadJS的朋友,从零开始,逐步精通。

    本周的小目标:理解并学会使用SpreadJS的工作簿。

    在开始记录学习笔记之前,我要特别感谢一个人:来自葡萄城纯前端技术交流群的大牛Kevin——一个声音充满磁性、技术全面、细致入微的大暖男。

    正是在Kevin的帮助下,我仅用了3天时间,便掌握并实现了SpreadJS 的滚动条、标签、工作簿事件、命中测试等功能。下面我将以图文的形式记录我的学习笔记,并在文末上传我做的Demo,希望给大家一些借鉴:

    初始化 SpreadJS

     

    通过选择【表单名称标签】菜单下的“显示新增按钮”,即可控制Sheet状态栏的加号是否显示:

     

    SpreadJS 滚动条

    通过选择【滚动条】菜单下的“显示水平滚动条”选项,即可控制表单水平、竖直滚动条是否显示:


    通过选择【背景】菜单下的“填充表格背景色”和“填充灰色区域背景色”,即可改变表格和状态栏区域的主题颜色配置:

    SpreadJS JSON 文件的导入/导出

    SpreadJS表格控件支持以JSON的格式导入导出数据,并可保存录入数据。SpreadJS通过使用数据源序列化和自定义特性序列化两种方式实现JSON格式的导入和导出。

     

    数据源序列化

    若要将表单中的数据源序列化到JSON对象中,可以设置参数includeBindingSource: true,若未设置默认为false.
    如下图,点击【数据源序列化】按钮,即可将上表中的数据源数据导出,在下表中导入:

     


    自定义特性序列化
    除了数据源序列化,SpreadJS也支持按用户自定义的特性进行JSON数据的序列化与反序列化。如下图,点击【加样式】按钮,即可为表格的视图及标签区域加入自定义样式,点击【自定义特性序列化】即可按照刚加入的自定义样式进行序列化。


    注:SpreadJS支持按以下自定义特性进行序列化与反序列化:

    1.      自定义单元格类型
    2.      自定义函数
    3.      自定义格式
    4.      自定义函数、迷你图
    5.      自定义标签
    6.      自定义行筛选

    hitTest(命中测试)

    通过点击SpreadJS工作簿的单元格以进行命中测试,利用hitTest方法实现返回特定区域的属性值。


    SpreadJS Demo 示例

    以下是我在学习SpreadJS工作簿的过程中,自己写的两个小示例,供大家参考。

    SpreadJSBasicDemo1.zip:包含了背景、滚动条、标签功能的示例

    SpreadJSBasicDemo2.zip:包含了工作簿事件、命中测试,以及JSON文件

     

    OK,今天先记录到这里,下一步计划:学习SpreadJS的表单。

    SpreadJS,我一定会征服你的,加油!

     

     

    PS:文中提到的Kevin小哥哥非常腼腆,这里就不方便透露他的私人联系方式了。不过,在前端技术交流群(720389894)中可以找到他

     

     

  • 相关阅读:
    mongodb 4.X 创建用户以及授权
    文件上传之后,MD5不一致,大小一致
    golang macaron各种形式入参封装
    说说非托管资源的回收
    layui数据表格批量删除
    除按钮外禁用所有表单项
    could not read Username for 'https://github.com': No error
    进入Web的殿堂与Django的初接触
    shell脚本中的小数运算
    js遍历数组时删除元素最终结果不对
  • 原文地址:https://www.cnblogs.com/C1SupportTeam/p/11044128.html
Copyright © 2020-2023  润新知