请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

jyjc 讲师达人认证
高级会员   /  发表于:2021-9-6 17:10  /   查看:1811  /  回复:6
2金币
image.png300008849.png
这种方式自定义的浮动元素框,在toJSON和formJSON的时候,有自定义的方式支持序列化吗?
类似这种的
image.png781685180.png
image.png848696288.png

最佳答案

查看完整内容

浮动元素属于静态类,没有提供typename字段用于标记自定义特性。 SJS提供了FloatingObjectLoaded事件,在加载浮动元素时会触发该事件。 所以,可以将动态修改html的代码逻辑在此事件内完成。 这样,在序列化反序列化时,初始化浮动元素会执行此事件动态修改html。 示例代码: 具体请参考附件demo

6 个回复

倒序浏览
最佳答案
最佳答案
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-9-6 17:10:25
来自 7#
浮动元素属于静态类,没有提供typename字段用于标记自定义特性。
SJS提供了FloatingObjectLoaded事件,在加载浮动元素时会触发该事件。
所以,可以将动态修改html的代码逻辑在此事件内完成。
这样,在序列化反序列化时,初始化浮动元素会执行此事件动态修改html。
示例代码:
  1. spread.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, function (e, info) {
  2.                 let el = document.getElementById('main')
  3.                 let _guid = el.dataset.guid
  4.                 function ajax(guid) {
  5.                     var result = [
  6.                         {
  7.                             id: 1,
  8.                             name: '测试1'
  9.                         },
  10.                         {
  11.                             id: 2,
  12.                             name: '测试2'
  13.                         }
  14.                     ]

  15.                     return {
  16.                         then(cb) {
  17.                             cb(result)
  18.                         }
  19.                     }
  20.                 }
  21.                 ajax(_guid).then(res => {
  22.                     let html = "<ul>"
  23.                     html += res.map(item => `<li>${item.id}:${item.name}</li>`)
  24.                     html += "</ul>"
  25.                     el.innerHTML = html
  26.                 })
  27.             });

  28.             let guid = '0000-1111-2222-4444'
  29.             let div = document.createElement('div');
  30.             div.innerHTML = `<div id="main" data-guid="${guid}" style="width: 100%;height:100%;"></div>`;
  31.             div.style.background = '#fff';
  32.             let customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("name", 100, 140, 400, 400);
  33.             customFloatingObject.content(div);
  34.             sheet.floatingObjects.add(customFloatingObject);
复制代码
具体请参考附件demo



浮动元素.zip

9.13 MB, 下载次数: 43

回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-9-6 17:44:22
2#
您好,自定义特性序列化是针对于自定义单元格类型、自定义函数等自定义相关功能而设置的。
目的是解决导入导出json时自定义特性丢失的问题,具体原理可以参考学习指南:
https://demo.grapecity.com.cn/sp ... item-serialization# image.png251004332.png

浮动元素不属于自定义特性,导入导出json不会丢失,所以是不需要自定义序列化的。

回复 使用道具 举报
jyjc讲师达人认证
高级会员   /  发表于:2021-9-6 17:54:52
3#
Lynn.Dou 发表于 2021-9-6 17:44
您好,自定义特性序列化是针对于自定义单元格类型、自定义函数等自定义相关功能而设置的。
目的是解决导入 ...

你好,导入导出不会丢失这个是限制在静态的html文本;
我这边场景需要html根据一些数据去初始化,这个过程是js操作的,导出之后就只剩下html结构,期望能在初始化的能在fromjson的时候,对这个导出的结构进行数据填充操作。
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-9-6 18:05:12
4#
从描述中没太理解这个过程,您能否提供一个简单的demo,以及详细的描述下您期待的效果。
这边在代码基础上调研下是否有可行方案。
回复 使用道具 举报
jyjc讲师达人认证
高级会员   /  发表于:2021-9-6 19:06:42
5#
Lynn.Dou 发表于 2021-9-6 18:05
从描述中没太理解这个过程,您能否提供一个简单的demo,以及详细的描述下您期待的效果。
这边在代码基础上 ...

  let guid = '0000-1111-2222-4444'
    let div = document.createElement('div');
    div.innerHTML = `<div id="main" data-guid="${guid}" style="width: 100%;height:100%;"></div>`;
    div.style.background = '#fff';

    let customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("name", 100, 140, 400, 400);
    customFloatingObject.content(div);
    sheet.floatingObjects.add(customFloatingObject);
    // 上面会记录进入ssjson

    function ajax(guid) {
        var result = [
            {
                id: 1,
                name: '测试1'
            },
            {
                id: 2,
                name: '测试2'
            }
        ]

        return {
            then(cb) {
                cb(result)
            }
        }
    }


    let el = document.getElementById('main')
    let _guid = el.dataset.guid

    ajax(_guid).then(res => {
        let html = "<ul>"
        html += res.map(item => `<li>${item.id}:${item.name}</li>`)
        html += "</ul>"
        el.innerHTML = html
    })
回复 使用道具 举报
jyjc讲师达人认证
高级会员   /  发表于:2021-9-6 19:08:59
6#
jyjc 发表于 2021-9-6 19:06
let guid = '0000-1111-2222-4444'
    let div = document.createElement('div');
    div.innerHTM ...

类似这种过程,因为插入浮动元素之后,使用js变化了dom,这部分不会被序列化
在反序列化的时候,希望有方式定义如何取序列化这个原始,而不是直接按照模板插入进去了。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部