O2OA API

Class

DatatablePC

Extends

DatatablePC 数据表格组件。表格形式的多行数据编辑组件。

Usable Range

Process CMS Portal

Since

  • v6.2

Example

//可以在脚本中获取该组件
//方法1:
var datatable = this.form.get("name"); //获取组件
//方法2
var datatable = this.target; //在组件事件脚本中获取

Source

Members

currentEditedLineMWF.xApplication.process.Xform.DatatablePC.Line|MWF.xApplication.process.Xform.DatatableMobile.Line|Null

数据表格当前正在编辑的条目,当数据表格为“同时编辑多行”时无此属性。

Type

  • MWF.xApplication.process.Xform.DatatablePC.Line | MWF.xApplication.process.Xform.DatatableMobile.Line | Null

Example

//获取数据表格“dt1”的正在编辑的条目。
var line = this.form.get("dt1").currentEditedLine;
//获取数据
var data = line.getData();
//设置数据
line.setData({"subject":"111"});
//获取subject字段的值
var data = line.get("subject").getData();
//设置subject字段的值
line.get("subject").setData("test1");

Source

jsonJsonObject

组件的配置信息,比如id,类型,是否只读等等。可以在组件的queryLoad事件里修改该配置来对组件做一些改变。

Type

  • JsonObject

Example

//可以在脚本中获取该组件
var json = this.form.get("fieldId").json; //获取组件对象
var id = json.id; //获取组件的id
var type = json.type; //获取组件的类型,如Textfield 为文本输入组件,Select为下拉组件

//在组件queryLoad事件里设置组件只读。
//当前组件的queryLoad事件运行时还没有在form里注册,通过this.form.get("fieldId")不能获取到当前组件,需要用this.target获取。
var json = this.target.json;
json.isReadonly = true; //设置组件为只读。

Source

parentLineMWF.xApplication.process.Xform.Datatemplate.Line|MWF.xApplication.process.Xform.DatatablePC.Line|MWF.xApplication.process.Xform.DatatableMobile.Line

当前组件在数据表格或者数据模板中时,可以通过此属性获取所在行(条目)对象.

Type

  • MWF.xApplication.process.Xform.Datatemplate.Line | MWF.xApplication.process.Xform.DatatablePC.Line | MWF.xApplication.process.Xform.DatatableMobile.Line

Example

//获取当前组件所在数据模板/数据表格的行(条目)对象
var line = this.target.parentLine;
//获取当前字段所在行下标
var index = line.getIndex();
//获取当前字段所在条目的subject字段的值
var data = line.getModule("subject").getData();
//设置当前字段所在条目的subject字段的值
line.getModule("subject").setData("test1");

Source

Methods

getAllSectionData() → {Object}

当数据表格设置为区段合并展现、区段合并编辑时,可以使用本方法获取所有区段数据。

Returns

  • Object

    对象.

Example

var data = this.form.get("fieldId").getAllSectionData();
//data格式如下:
{
 	"3455b82a-399c-4ee4-b9b9-e70ae40fbaf1": { //区段1的key和data
			"data": [
				{
					"good": "yf",
					"number_2": 11,
					"prize": 1
				}
			]
		},
 	"83de86fc-60bc-4b4c-955c-1085915865a4": { //区段2的key和data
 		"data": [
 			{
 				"good": "yf",
 				"number_2": 11,
 				"prize": 10
 			}
 		]
 	}
 }

Source

setData(data, fireChange)

为数据表格赋值,如果需要设置所有区段数据请使用setAllSectionData方法。

Description

当参数为Promise的时候,请查看文档: 使用Promise处理表单异步
当表单上没有对应组件的时候,可以使用this.data[fieldId] = data赋值。

Parameters

  • data DatatableData | Promise | Array

    必选,数组或Promise.

  • fireChange boolean

    可选,是否触发change事件,默认false.

Examples

this.form.get("fieldId").setData([]); //赋空值
//如果无法确定表单上是否有组件,需要判断
 if( this.form.get('fieldId') ){ //判断表单是否有无对应组件
     this.form.get('fieldId').setData( data );
 }else{
     this.data['fieldId'] = data;
 }
//使用Promise
 var field = this.form.get("fieldId");
 var promise = new Promise(function(resolve, reject){ //发起异步请求
   var oReq = new XMLHttpRequest();
   oReq.addEventListener("load", function(){ //绑定load事件
     resolve(oReq.responseText);
   });
   oReq.open("GET", "/data.json"); //假设数据存放在data.json
   oReq.send();
 });
 promise.then( function(){
   var data = field.getData(); //此时由于异步请求已经执行完毕,getData方法获得data.json的值
})
 field.setData( promise );

Source

setAllSectionData(data, fireChange)

当数据表格设置为区段合并展现、区段合并编辑时,可以使用本方法设置所有区段数据。

Parameters

  • data Object

    必选,对象.

  • fireChange boolean

    可选,是否触发change事件,默认false.

Examples

this.form.get("fieldId").setAllSectionData({}); //赋空值
this.data['fieldId'].setAllSectionData({
 	"3455b82a-399c-4ee4-b9b9-e70ae40fbaf1": { //区段1的key和data
			"data": [
				{
					"good": "yf",
					"number_2": 11,
					"prize": 1
				}
			]
		},
 	"83de86fc-60bc-4b4c-955c-1085915865a4": { //区段2的key和data
 		"data": [
 			{
 				"good": "yf",
 				"number_2": 11,
 				"prize": 10
 			}
 		]
 	}
 });

Source

isEmpty() → {Boolean}

判断数据表格是否为空.

Returns

  • Boolean

    是否为空

Example

if( this.form.get('fieldId').isEmpty() ){
    this.form.notice('至少需要添加一条数据', 'warn');
}

Source

getLine(index) → {MWF.xApplication.process.Xform.DatatablePC.Line|Null}

获取对应的条目。

Parameters

  • index Number

    条目序号,从零开始

Returns

  • MWF.xApplication.process.Xform.DatatablePC.Line Null

    对应的数据表格条目

Example

//获取数据表格“dt1”的第一个条目。
var line = this.form.get("dt1").getLine(0);
//获取第一行的数据
var data = line.getData();
//设置第一行的数据
line.setData({"subject":"111"});
//获取第一个条目subject字段的值
var data = line.get("subject").getData();
//设置subject字段的值
line.get("subject").setData("test1");

Source

addLine(dataopt) → {MWF.xApplication.process.Xform.DatatablePC.Line}

在数据表格末尾添加条目。

Parameters

  • data Object <optional>

    添加条目的数据。

Returns

  • MWF.xApplication.process.Xform.DatatablePC.Line

    添加的数据表格条目

Example

var line = this.form.get("dt1").addLine();

Source

insertLine(index, dataopt) → {MWF.xApplication.process.Xform.DatatablePC.Line|Null}

在数据表格指定位置添加条目。

Parameters

  • index Number

    条目序号,从零开始,如果下标超过当前数据表格条目数,插入失败并返回null。

  • data Object <optional>

    添加条目的数据。

Returns

  • MWF.xApplication.process.Xform.DatatablePC.Line Null

    插入的数据表格条目

Example

var line = this.form.get("dt1").insertLine(0);

Source

deleteLine(index)

删除指定位置的条目。

Parameters

  • index Number

    条目序号,从零开始,如果下标超过当前数据表格条目数,删除失败。

Example

//直接删除第一个条目
this.form.get("dt1").deleteLine(0);

Source

getModule(index, id) → {FormComponent}

获取对应表单组件,作用等同于get。

Parameters

  • index Number

    条目序号,从零开始

  • id String

    组件标识

Returns

  • FormComponent

    对应表单组件

Example

//获取数据表格“dt1”的第一个条目的subject字段。
var module = this.form.get("dt1").getModule(0, "subject");
//获取subject字段的值
var data = module.getData();
//设置subject字段的值
module.setData("test1");

Source

get(index, id) → {FormComponent}

获取对应表单组件,作用等同于getModule。

Parameters

  • index Number

    条目序号,从零开始

  • id String

    组件标识

Returns

  • FormComponent

    对应表单组件

Example

//获取数据表格“dt1”的第一个条目的subject字段。
var module = this.form.get("dt1").get(0, "subject");
//获取subject字段的值
var data = module.getData();
//设置subject字段的值
module.setData("test1");

Source

getData() → {DatatableData}

获取数据表格数据.

Description

在脚本中使用 this.data[fieldId] 也可以获取组件值。 区别如下:
1、当使用Promise的时候
使用异步函数生成器(Promise)为组件赋值的时候,用getData方法立即获取数据,可能返回修改前的值,当Promise执行完成以后,会返回修改后的值。
this.data[fieldId] 立即获取数据,可能获取到异步函数生成器,当Promise执行完成以后,会返回修改后的值。
具体差异请查看链接
2、当表单上没有对应组件的时候,可以使用this.data[fieldId]获取值,但是this.form.get('fieldId')无法获取到组件。

Returns

Examples

var data = this.form.get('fieldId').getData();
//如果无法确定表单上是否有组件,需要判断
 var data;
 if( this.form.get('fieldId') ){ //判断表单是否有无对应组件
     data = this.form.get('fieldId').getData();
 }else{
     data = this.data['fieldId']; //直接从数据中获取字段值
 }
 
//使用Promise
 var field = this.form.get("fieldId");
 var promise = new Promise(function(resolve, reject){ //发起异步请求
   var oReq = new XMLHttpRequest();
   oReq.addEventListener("load", function(){ //绑定load事件
     resolve(oReq.responseText);
   });
   oReq.open("GET", "/data.json"); //假设数据存放在data.json
   oReq.send();
 });
 promise.then( function(){
   var data = field.getData(); //此时由于异步请求已经执行完毕,getData方法获得data.json的值
})
 field.setData( promise );

Source

getSource(typeopt) → {Source|SubSource|SubSourceItem}

当前组件在数据源组件中时,可以通过此方法获取所在的上级数据源/子数据源/子数项组件.

Parameters

  • type String <optional>

    需要获取的类型,"source"为表示数据源,"subSource"表示子数据源,"subSourceItem"表示子数据项组件。 如果该参数省略,则获取离当前组件最近的上述组件。

Returns

  • Source SubSource SubSourceItem

Example

var source = this.target.getSource(); //获取当前组件的所在子上级数据源/子数据源/子数项组件.
var data = source.data; //获取数据

var source = this.form.get("fieldId").getSource("source"); //获取数据源组件
var data = source.data; //获取数据

Source

getParentModule(typeopt, validateFunctionopt) → {MWF.xApplication.process.Xform.$Module}

获取当前组件所在的祖先组件.

Parameters

  • type String <optional>

    需要获取的组件类型。 如果该参数省略,则获取离当前组件最近的祖先组件。type有效值如下:

    form- 表单
    common- 通用组件
    datatable- 数据表格
    datatableline- 数据表格行
    datatemplate- 数据模板
    datatemplateline- 数据模板行
    div- 容器组件
    elcommon- Element通用组件
    elcontainer- Element容器组件
    subform- 子表单
    source- 数据源组件
    subsource- 子数据源
    subsourceitem- 子数据项组件
    tab- 分页组件
    tabpage- 分页组件的某个分页
    table- 表格
    tabletd- 单元格
    widget- 部件
  • validateFunction function <optional>

    进一步校验,参数为获取到匹配到类型的组件,返回false继续往上取对应类型的组件,返回true返回该组件。

Returns

Example

var module = this.target.getParentModule(); //获取最近的祖先。

var datatemplateLine = this.target.getParentModule("datatemplateline"); //获取当前组件所在的数据模板行.

var module = this.target.getParentModule(null, function(module){
    return module.json.id === "div_1";
}); //获取当前组件id为div_1的父组件。

Source

Events

beforeLoadLine

每初始化一个条目,但未加载的时候触发,通过this.event可以获取条目对象。

afterLoadLine

每一个条目加载后时候触发,通过this.event可以获取条目对象。

change

数据表格改变时触发。通过this.event.lines可以获取修改的条目数组,this.event.type可以获得修改的类型。

this.event.type触发类型this.event.lines
addline添加一行添加的行数组
deleteline删除一行删除的行数组
editcomplete某行完成编辑(点击当前编辑行前面的√执行。同时编辑多行忽略)编辑的行数组
editmodule字段值改变时(同时编辑多行触发此事件,每次编辑单行忽略)this.event.lines为编辑的行数组
this.event.module为修改的字段
move通过向上箭头调整行顺序数据表格所有行
import导入数据后数据表格所有行

addLine

添加条目时触发。通过this.event.line可以获取对应的条目对象,this.event.ev可以获得事件触发的Event。

editLine

编辑条目时触发(同时编辑多行不触发此事件)。通过this.event可以获取对应的条目对象。

completeLineEdit

完成编辑条目时触发(点击当前编辑行前面的√执行。同时编辑多行不触发此事件)。通过this.event可以获取对应的条目对象。

cancelLineEdit

取消编辑条目时触发(点击当前编辑行前面的 — 执行。同时编辑多行不触发此事件)。通过this.event可以获取对应的条目对象。

deleteLine

删除条目前触发。通过this.event可以获取对应的条目对象。

export

导出excel的时候触发,this.event指向导出的数据,您可以通过修改this.event来修改数据。

Example

this.event数据格式如下:

{
 	data : [
  		["姓名","性别","学历","专业","出生日期","毕业日期"], //标题
 		[ "张三","男","大学本科","计算机","2001-1-2","2019-9-2" ], //第一行数据
 		[ "李四","男","大学专科","数学","1998-1-2","2018-9-2" ]  //第二行数据
	], //导出的数据
    colWidthArray : [100, 50, 100, 200, 150, 150], //每列宽度
    title : "xxxx" //导出的excel文件标题
}

validImport

在导入excel,进行数据校验后触发,this.event指向导入的数据。

Example

this.event数据格式如下:

{
 	data : [
 	   {
 	 	"姓名" : "张三",
 	 	"性别" : "男",
 	 	"学历" : "大学本科",
 	    "专业" : "计算机",
 	    "出生日期" : "aa01-1-2",
 	 	"毕业日期" : "2019-9-2",
 	 	"errorTextList" : [
 	 	    "第5列:aa01-1-2不是正确的日期格式。"
 	 	] //校验出的错误信息,如果该行数据正确,则无该字段
 	 }
 	 ...
    ], //导入的数据
    "validted" : true  //是否校验通过,可以在本事件中修改该参数,确定是否强制导入
}

import

在导入excel,数据校验成功将要设置回数据表格的时候触发,this.event指向整理过的导入数据,格式见DatatableData

afterImport

在导入excel,数据设置回数据表格以后触发,this.event指向整理过的导入数据,格式见DatatableData

results matching

    No results matching ''