zoukankan      html  css  js  c++  java
  • 从零开始,SpreadJS新人学习笔记【第4周】

     

     

    数据绑定、脏数据和单引号前缀

    本周,让我们一起来学习SpreadJS 的数据绑定、脏数据和单引号前缀,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通。

    在此前的学习笔记中,相信大家已经学会并熟练掌握了SpreadJS的表单、函数、工作簿及产品的基本使用方法。在之后的学习阶段,我们将更进一步,深入了解SpreadJS的数据绑定、单元格类型及前端导入导出Excel等核心功能,充分体验“仅需100多行代码,就可将Excel嵌入Web应用系统” 的全过程。

    SpreadJS 学习笔记的配套视频资料,请在此页面观看、下载。

    SpreadJS 的数据绑定

    SpreadJS 作为一个类Excel的纯前端表格控件,有着和Excel高度类似的功能和用户体验,但同时也有很多Excel所没有的独特功能,数据绑定就是其中之一。

    数据绑定作为SpreadJS最常用的功能,主要分为表单级别的绑定、单元格级别的绑定和整个表格的数据绑定。

    1. 表单级别绑定

    使用setDataSource和getDataSource方法实现绑定数据源、获取数据源。
    绑定列时可以通过设置formatter指定列的展示样式,例如数据源的出生日期格式为:"DATE_OF_BIRTH":"1958-10-26 00:00:00",设置formatter:'yyyy/m/d'后出生日期显示为: 


    此外,还可自定义设置某列的样式为checkbox(单选框)等,例如下图“过敏史”一列:




    2. 单元格级别的绑定

    使用getBindingPath方法,用于获取指定单元格的绑定信息。
    点击单元格,如果该单元格绑定了数据源,则可以获取该单元格的绑定信息:
     


    3. 表格绑定


    表格绑定,实质上是一种特殊的单元格级别绑定。使用表格绑定,可以给表格绑定不同的数据,例如下图,通过点击按钮,即可实现给表格绑定不同的数据源:


     
    点击按钮,绑定新的数据源,结果如下图:

     

    SpreadJS 的导航、脏数据和单引号前缀

    SpreadJS单元格导航行为


    在SpreadJS中,按下tab键,默认是移动到下一个单元格。当然,在GC.Spread.Sheets.Commands中可以定义这些导航操作,如下图:切换下拉框的内容,可以重新定义按下  Tab 键时的行为。



    当选择"先单元格再控件"时,选中项移动到最后一个单元格时会再次选中页面的其他控件。

    SpreadJS如何处理脏数据


    在SpreadJS中,使用 getDirtyRows 和 getDirtyCells 可以获取表单上发生数据变更的单元格或行,使用 clearPendingChanges ,可以清除值变更、插入/删除行的状态。
    "脏数据"的定义:

    • 当单元格的值变更时,该单元格为脏数据;
    • 当单元格的值变更时,该单元格所在行均为脏数据;
    • 当插入一行,并在单元格中设置值时,该行与该单元格不是脏数据




    举例:如图所示,插入一行,并在A1中输入123,点击获取插入行,显示新插入的行号为0。此时,点击获取行脏数据、获取单元格脏数据均无反应。
     



    SpreadJS单引号前缀


    当你输入的值带有单引号前缀',输入的值会被转换并存储为字符串。如下图:

    SpreadJS 导航、脏数据、单引号前缀示例:editCell.zip

    OK,今天先记录到这里,下一周学习计划: SpreadJS的复制粘贴、单元格格式和单元格类型。

    PS:文中提到的学习视频和示例源码,都已经上传到SpreadJS官网的【入门视频】中,欢迎大家观看学习。

    >>视频地址

  • 相关阅读:
    一个进程间同步和通讯的 C# 框架
    C# 程序员最常犯的 10 个错误
    《C#并发编程经典实例》笔记
    C# BackgroundWorker 详解
    C# Excel导入导出
    List实现行转列的通用方案
    C# 开发者最经常犯的 8 个错误
    Intellij IDEA 查找接口实现类的快捷键
    target runtime com.genuitec.runtime.genuitec.jee60 is not defined
    java.io.WinNTFileSystem
  • 原文地址:https://www.cnblogs.com/C1SupportTeam/p/11153201.html
Copyright © 2011-2022 走看看