本文档主要介绍如何通过乐创者报表/单元格表单中通过”扩展控件”有一定业务场景的预置扩展组件的使用、开发的实现原理及基本过程。
适合于有一定Web前端技术开发人员,如果还没有掌握前端技术,可参考以下资料:
javascript教程:https://www.w3school.com.cn/js/index.asp
css教程:https://www.w3school.com.cn/css/index.asp

1、下拉框

1.1、参数说明

  • type String 【必选】
    扩展的单元格类型,值:select

1.2、待实现方法

  • init Function 【必选】
    控件初始化入口函数。

    /**
    * 扩展控件初始化入口函数(作为用户构建控件实例的入口)
    * @param datas 扩展控件数据集(来源于扩展单元格上设置的模板数据和选择的字段),格式:{'列名1':[列数据],'列名2':[列数据]}
    * @param element 扩展控件所属的element对象
    * @param settings 报表对象
    */
    init: function(datas, element, settings) {
    }
  • resize Function 【可选】

    /**
    * 响应容器高度,宽度自适应;如果单元格的行高、列宽都是固定的,此函数可以不实现
    */
    resize: function() {
    }
  • destroy Function 【可选】

    /**
    * 控件销毁事件,如果控件中没有特殊对象,可以不实现销毁代码。有些特殊对象,如果不销毁可能导致浏览器内存不断占用,最终导致溢出。
    * 触发时机:单元格重新渲染或销毁时。
    */
    destroy: function() {
    }
  • reloadData Function 【可选】

    /**
    * 重新加载数据
    */
    reloadData: function(datas) {
     //数据刷新后,可以在这里重新渲染控件
    }
  • beforeLinkage Function 【可选】

    /**
    * 联动触发前事件,返回false将不触发后续联动渲染
    */
    beforeLinkage: function() {
    }

1.3、内置方法

同扩展控件。

1.4、暂不支持的功能

同扩展控件。

2、级联控件

2.1、参数说明

  • type String 【必选】
    扩展的单元格类型,值:cascader

  • dataSource Object 【必选】
    本扩展组件不支持扩展单元格上设置模板数据作为控件数据源。只能通过本属性设定数据源,格式:

    {
      "adapterName": "模板数据名称",
      "codeField": "编码字段",
      "nameField": "名称字段",
      "parentField": "父编码字段",
      "leafField": "是否叶子节点字段",
      "loadMode": 0
    }

2.2、待实现方法

  • init Function 【必选】
    控件初始化入口函数。

    /**
    * 扩展控件初始化入口函数(作为用户构建控件实例的入口)
    * @param datas 扩展控件数据集(来源于扩展单元格上设置的模板数据和选择的字段),格式:{'列名1':[列数据],'列名2':[列数据]}
    * @param element 扩展控件所属的element对象
    * @param settings 报表对象
    */
    init: function(datas, element, settings) {
    }
  • resize Function 【可选】

    /**
    * 响应容器高度,宽度自适应;如果单元格的行高、列宽都是固定的,此函数可以不实现
    */
    resize: function() {
    }
  • destroy Function 【可选】

    /**
    * 控件销毁事件,如果控件中没有特殊对象,可以不实现销毁代码。有些特殊对象,如果不销毁可能导致浏览器内存不断占用,最终导致溢出。
    * 触发时机:单元格重新渲染或销毁时。
    */
    destroy: function() {
    }
  • reloadData Function 【可选】

    /**
    * 重新加载数据
    */
    reloadData: function(datas) {
     //数据刷新后,可以在这里重新渲染控件
    }
  • beforeLinkage Function 【可选】

    /**
    * 联动触发前事件,返回false将不触发后续联动渲染
    */
    beforeLinkage: function() {
    }

2.3、内置方法

同扩展控件。

2.4、暂不支持的功能

同扩展控件。

作者:柳杨  创建时间:2023-08-31 15:43
最后编辑:柳杨  更新时间:2025-04-22 15:31