bizData组件

bizData组件，继承自data组件，在data组件的基础上封装了复杂的后台数据交互，是前端model上的数据核心。是biz层控制UI层数据的枢纽。可以根据biz层概念的定义和action动作，自动映射到UI层，与此同时，bizData还可以添加计算列（自定义字段）以及定义规则，操作等，更加简化了开发者写代码对数据的维护。其他显示组件绑定bizData组件后，就可以跟随bizData组件数据的变化，自动改变页面显示的数据。实现了开发者面向数据编程，使开发更加简单明了，方便直接，安全可靠！bizData组件继承了data组件很多的优势，详细请参考data组件文档

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

bizData组件继承自data组件，在data组件的基础上封装了复杂的后台数据交互，是前端model上的数据核心。是biz层控制UI层数据的枢纽。可以根据biz层概念的定义和action动作，自动映射到UI层，与此同时，bizData还可以添加计算列（自定义字段）以及定义规则，操作等，更加简化了开发者写代码对数据的维护。其他显示组件绑定bizData组件后，就可以跟随bizData组件数据的变化，自动改变页面显示的数据。实现了开发者面向数据编程，使开发更加简单明了，方便直接,安全可靠.
BizData是和biz端createAction、queryAction、saveAction绑定的业务data
refreshData对应执行queryAction
saveData、deleteData对应执行saveAction
newData对应执行createAction

组件路径：/UI2/system/components/justep/data
组件标识：$UI/system/components/justep/data/bizData

可实现以下功能：

• bizData组件数据修改和显示
• bizData组件树形设置

二. DOM结构

• 典型dom结构

<div component="$UI/system/components/justep/data/bizData"
	xid="bizDataXid"
	autoLoad="是否自动加载"
	concept="概念名" columns="显示列，使用逗号隔开"
	limit="每页显示数" orderBy="字段排序"
	directDelete="是否直接删除" confirmDelete="是否删除提示"
	confirmRefresh="是否刷新提示" confirmDeleteText="删除提示文字"
	confirmRefreshText="刷新时提示文字"
	autoNew="是否自动新增一行">
	<reader action="读取数据的action引用"/>
	<writer action="写入数据的action引用"/>
	<creator action="创建数据的action引用"/>
</div>

• 添加规则dom结构

<div component="$UI/system/components/justep/data/bizData"
	xid="bizDataXid"
	autoLoad="是否自动加载"
	concept="概念名" columns="显示列，使用逗号隔开"
	limit="每页显示数" orderBy="字段排序"
	directDelete="是否直接删除" confirmDelete="是否删除提示"
	confirmRefresh="是否刷新提示" confirmDeleteText="删除提示文字"
	confirmRefreshText="刷新时提示文字"
	autoNew="是否自动新增一行">
	<reader action="读取数据的action引用"/>
	<writer action="写入数据的action引用"/>
	<creator action="创建数据的action引用"/>
	<rule xid="rule6">
		<col name="列名1" xid="ruleCol10">
			<required xid="required4">
				<expr xid="default27">js:true</expr>
				<message xid="default28">请填写String</message>
			</required>
		</col>
		<col name="列名2" xid="ruleCol11">
			<constraint xid="constraint1">
				<expr xid="default29">js:val('列名2')&gt;50</expr>
				<message xid="default30">列名2的值必须大于50</message>
			</constraint>
		</col>
		<col name="列名3" xid="ruleCol12">
			<readonly xid="readonly6">
				<expr xid="default31">js:true</expr>
			</readonly>
			<calculate xid="calculate8">
				<expr xid="default32">js:$model.bizDataXid?$model.bizDataXid.sum('列名3',$row):0</expr>
			</calculate>
		</col>
	</rule>
</div>

• 树形dom结构

<!--data树形结构设置-->
<div component="$UI/system/components/justep/data/bizData"
	xid="bizDataXid"
	autoLoad="是否自动加载"
	concept="概念名" columns="显示列，使用逗号隔开"
	limit="每页显示数" orderBy="字段排序"
	directDelete="是否直接删除" confirmDelete="是否删除提示"
	confirmRefresh="是否刷新提示" confirmDeleteText="删除提示文字"
	confirmRefreshText="刷新时提示文字"
	autoNew="是否自动新增一行">
	<reader action="读取数据的action引用"/>
	<writer action="写入数据的action引用"/>
	<creator action="创建数据的action引用"/>
	<treeOption parentRelation="父关系" nodeKindRelation="节点类型关系" rootFilter="根节点过滤条件"/>
</div>

• 从表数据dom结构

<div component="$UI/system/components/justep/data/bizData"
	xid="bizDataXid"
	autoLoad="是否自动加载"
	concept="概念名" columns="显示列，使用逗号隔开"
	limit="每页显示数" orderBy="字段排序"
	directDelete="是否直接删除" confirmDelete="是否删除提示"
	confirmRefresh="是否刷新提示" confirmDeleteText="删除提示文字"
	confirmRefreshText="刷新时提示文字"
	autoNew="是否自动新增一行">
	<reader action="读取数据的action引用"/>
	<writer action="写入数据的action引用"/>
	<creator action="创建数据的action引用"/>
	<master xid="default2" data="主数据dataXid" relation="fMasterID"></master>
</div>

三. 样式

• 无

四. 属性

组件具有公共属性，请参考组件公共属性

组件继承自data组件，请参考data组件属性

• reader

[string][设计时属性]获取数据的action，通常指定概念的queryAction

xml格式：

<reader action="/SA/task/logic/action/queryWorkRecordAction"/>

• creator

[设计时属性]新增数据的action，通常指定概念的createAction，当data数据不需要新增时可以不指定

xml格式：

<creator action="/SA/task/logic/action/createWorkRecordAction"/>

• writer

[string][设计时属性]写数据的action，当保存或者删除数据提交时执行的action，通常指定概念的saveAction，当data数据不需要保存时可以不指定

xml格式：

<writer action="/SA/task/logic/action/saveWorkRecordAction"/>

• treeOption

[设计时属性]树参数,当isTree设置为true时，才可以编辑下面的属性

包括属性：
parentRelation [attribute] 父关系，形成父子树的父关系
rootFilter [attribute] 根过滤条件，当设置时树形数据将按节点加载数据
delayLoad [attribute] 延迟数据加载，默认值为true
nodeKindRelation [attribute] 节点类型关系，data操作时使用指定relation自动记录是否叶子节点信息
xml格式：

<treeOption parentRelation="" delayLoad="" rootFilter=""
			nodeKindRelation=""
			nodeLevelRelation="" />

• filters

[Filter]数据过滤条件控制对象,运行时修改此过滤条件，从而可以任意时刻查询任意条件下的数据集合，这里面写的是ksql语句，如支持命名参数，以’:’开头，如：WHERE SA_OPPerson.sName =:userName，详情请参考Ksql语法。

• newParam

[Request.ActionParam][只读]data的新增参数，为createAction准备的action请求参数

• queryParam

[Request.ActionParam][只读]data的刷新参数，为queryAction准备的action请求参数

• saveParam

[Request.ActionParam][只读]data的保存参数，为saveAction准备的action请求参数

• calculateRelation

[string][设计时属性]计算关系,在bizData组件上右键，添加计算关系，就可以设置此计算关系的相关属性了。

包括属性：
relation [attribute] 关系名
type [attribute] 数据类型
xml格式:

<calculateRelation relation="calculateRelation" type="string"/>

• columns

[设计时属性]等于 queryAction中select定义bizData使用的关系，不能大于queryAction中select定义的范围

• concept

[设计时属性]操作的概念，需要和queryAction中定义的一致

• filter

[设计时属性]过滤，在bizData组件上点右键，选择添加过滤条件，就会进行设置过滤的相关属性

包括属性：
name [attribute] 过滤名称
filter [attribute] 过滤表达式
xml格式：

<filter name="filter1">sName="aaa"</filter>

• isTree

[boolean][设计时属性]是否树形数据,如果为true就需要设置treeOption相关属性，否则treeOption下的属性不可编辑

• orderBy

[string][设计时属性]数据查询排序，如：sLastModifyTime:desc;sName:asc

• updateMode

[string][设计时属性]数据更新模式,取值：whereVersion/whereAll
BizData更新数据的原理:
解决数据更新冲突平台采用乐观锁实现，简单说就是多个人同时更新一条数据时只会一个更新成功；
平台中更新模式有两种：whereVersion,whereAll，其实还可以增加whereKey（目前没有） whereVersion更新数据时使用key和version作为条件更新，使用data的save时平台会自动维护version，也就是说在更新语句中会做version+1，当version变化时说明数据已经被人修改，当前更新失败回滚
whereAll模式使用所有查询列的旧值做更新的条件，当条件不满足就说明数据已经被人修改，当前更新失败回滚
从数据严格性上说：whereKey<whereVersion<whereAll
平台BizData默认使用whereVersion

五. 方法

组件具有公共方法，请参考组件公共方法

组件继承自data组件，请参考data组件方法

• getActivity

string getActivity()
获取data对象指定的activity

> 参数

无

> 返回值

string

var activity = this.comp('mainData').getActivity();

• getNewAction

string getNewAction()
获取新增biz action 名，对应creator属性

> 参数

无

> 返回值

string

var newAction = this.comp('mainData').getNewAction();

• getProcess

string getProcess()
获取data对象指定的process

> 参数

无

> 返回值

string

var process = this.comp('mainData').getProcess();

• getQueryAction

string getQueryAction()
获取查询biz action 名，对应reader属性

> 参数

无

> 返回值

string

var queryAction = this.comp('mainData').getQueryAction();

• getSaveAction

string getSaveAction()
获取保存biz action 名，对应writer属性

> 参数

无

> 返回值

string

var saveAction = this.comp('mainData').getSaveAction();

六. 事件

• onDeleteError

void onDeleteError(ErrorEvent event)
直接删除数据失败

> 参数

event: [ErrorEvent]此参数封装了删除数据失败后上下文中提供的一些变量

> 结构如下:

{
	"source" : 组件的js对象,
	"errorType" : 'server',
	"errorNode" : 错误信息,
	"httpError" : http请求失败(true/false),
	"httpState" : http请求返回码
}

> 返回值

void

Model.prototype.orderDataDeleteError = function(event){
		alert('错误信息是：' + event.errorNode);
	};

• onNewCreateParam

void onNewCreateParam(NewCreateParamEvent event)
业务新增数据创建新增参数事件，可以增加和修改用户自定义的参数。主要能力是配合自定义action的参数

> 参数

event: [NewCreateParamEvent]此参数封装了关于修改自定义参数的上下文变量

> 结构如下:

{
	"source" : 组件的js对象,
	"param" : {Request.ActionParam}// 新增参数对象,
	"table" : {List<$UI/system/components/justep/data/data#Row>}// 新增行的默认值数组 ，
			//数组的长度决定新增行数，数组中的对象是列的默认值
	"options" {Object} //新增传入的参数,如果是tree时可以使用options.parent获取父行对象
	"defaultValues" : {Object} //- 新增行的默认值表达式字符串，支持使用Biz的fn函数，
	//如果fName默认值是'abc'那么正确写法是
	//defaultValues['fName']=justep.Util.toExprString('string','abc')，
	//当table上没有给出默认值时使用此默认值表达式，建议简单默认值尽量使用table参数
		defaultValues格式：{列名:默认值表达式,...}
}

> 返回值

void

//使用newData方法添加数据时，在onNewCreateParam事件中将fContent处理敏感词汇，比如：“丑”变成“美”
Model.prototype.orderDataNewCreateParam = function(event){
	for(var i=0;i<event.table.length;i++){
		var content = event.table[i].fContent;
		if(content.indexOf('丑') != -1){
			content = content.replace(new RegExp(/(丑)/g),'美')
			event.table[i].fContent = content;
		}
	}
};

• onNewError

void onNewError(ErrorEvent event)
新增数据失败后触发的事件

> 参数

event: [ErrorEvent]此参数封装了新增数据失败后上下文中提供的一些变量

> 结构如下:

{
	"source" : 组件的js对象,
	"errorType" : 'server',
	"errorNode" : 错误信息,
	"httpError" : http请求失败(true/false),
	"httpState" : http请求返回码
}

> 返回值

void

Model.prototype.orderDataNewError = function(event){
	alert('新增错误信息是：' + event.errorNode);
};

• onRefreshCreateParam

void onRefreshCreateParam(RefreshCreateParamEvent event)
业务刷新数据创建刷新参数事件，可以增加和修改用户自定义的参数。主要能力是配合自定义action的参数

> 参数

event: [RefreshCreateParamEvent]此参数封装了刷新时关于修改自定义参数的上下文变量

> 结构如下:

{
	"source" : 组件的js对象,
	"options" {Object} 新增传入的参数,如果是tree时可以使用options.parent获取父行对象
	"param" : {Request.ActionParam} 刷新参数对象
	"offset" : 取数据的偏移
	"limit" : 取数据的条数
}

> 返回值

void

//刷新时修改每页的行数为10
Model.prototype.orderDataRefreshCreateParam = function(event){
	event.param.getParam('limit').value = 10
};

• onRefreshError

void onRefreshError(ErrorEvent event)
刷新数据失败时触发的事件

> 参数

event: [ErrorEvent]此参数封装了刷新数据失败后上下文中提供的一些变量

> 结构如下:

{
	"source" : 组件的js对象,
	"errorType" : 'server',
	"errorNode" : 错误信息,
	"httpError" : http请求失败(true/false),
	"httpState" : http请求返回码
}

> 返回值

void

Model.prototype.orderDataRefreshError = function(event){
	alert('新增错误信息是：' + event.errorNode);
};

• onSaveCreateParam

void onSaveCreateParam(object event)
业务数据保存创建保存参数事件，可以增加和修改用户自定义的参数，主要能力是配合自定义action的参数

> 参数

event: [object]此参数封装了刷新数据失败后上下文中提供的一些变量

> 结构如下:

{
	"source" : 组件的js对象,
	"param" : {Request.ActionParam} 保存参数对象
}

> 返回值

void

//保存时把名称修改为小明（比如修改当前人，当前时间等）。
Model.prototype.taskDataSaveCreateParam = function(event){
	event.param.setString('fName','小明');
};

• onSaveError

void onSaveError(ErrorEvent event)
保存数据失败时触发的事件

> 参数

event: [object]此参数封装了保存数据失败后上下文中提供的一些变量

> 结构如下:

{
	"source" : 组件的js对象,
	"errorType" : 'server',
	"errorNode" : 错误信息,
	"httpError" : http请求失败(true/false),
	"httpState" : http请求返回码
}

> 返回值

void

Model.prototype.orderDataSaveError = function(event){
	alert('保存错误信息是：' + event.errorNode);
};

七. 操作

• 无

八. 案例

1、bizData组件数据修改和显示

input修改值引起output显示发生变化

• 在biz层根目录右键，选择新建，应用，名字为test
• test应用目录点右键，新建业务模块。
• ontology目录点右键，新建ontology文件。
• ontology文件上添加概念和关系，添加标准动作设置,生成数据库表。
• process目录上点右键，新建process文件。
• process文件中选中activit，动作设置，添加刚刚生成的标准动作。
• UI2对应的process目录下新建.w文件，选择一个空白的.w
• 在.w中拖入bizData组件，修改xid，选择concept属性为刚刚定义的概念名，默认生成对应标准动作，bizData配置如下：

<div component="$UI/system/components/justep/data/bizData"
	autoLoad="false" xid="mainData" concept="test"  autoNew="false">
	<reader xid="default1" action="/test/test/logic/action/queryTestAction"/>
	<writer xid="default2" action="/test/test/logic/action/saveTestAction"/>
	<creator xid="default3" action="/test/test/logic/action/createTestAction"/>
</div>

• 添加tooBar组件，右键添加几个常用操作，添加，删除，刷新。代码如下：

<div component="$UI/system/components/justep/toolBar/toolBar"
	class="x-toolbar form-inline x-toolbar-spliter" xid="toolBar1">
	<a component="$UI/system/components/justep/button/button"
		class="btn btn-link btn-icon-left"
		onClick="{'operation':'mainData.save'}" xid="button1">
		<i xid="i1"/>
		<span xid="span1"/>
	</a>
	<a component="$UI/system/components/justep/button/button"
		class="btn btn-link btn-icon-left"
		onClick="{'operation':'mainData.delete'}" xid="button2">
		<i xid="i2"/>
		<span xid="span2"/>
	</a>
	<a component="$UI/system/components/justep/button/button"
		class="btn btn-link btn-icon-left"
		onClick="{'operation':'mainData.new'}" xid="button3">
		<i xid="i3"/>
		<span xid="span3"/>
	</a>
</div>

• 拖放一个input组件和一个output组件，绑定bizData字段，用于输入数据，显示数据。代码如下：

<input component="$UI/system/components/justep/input/input"
	class="form-control" xid="input1" bind-ref="mainData.ref('fName')"/>
<div component="$UI/system/components/justep/output/output"
	class="x-output" xid="output1" bind-ref="mainData.ref('fName')"/>

• UI2层在test应用的config目录下，打开test.function.xml文件，添加功能树。然后再设置并分配功能角色权限
• 在运行页面中，点击新建按钮，为data新增一行数据，input用于录入数据，点击保存就可以保存到数据库了

2、bizData组件树形设置

• bizData的树形设置必须是存放的树形数据，主要的特点就是isTree设置为true，并且设置treeOption相关属性即可，数据的展现要结合tree或grid组件实现，tree组件中也介绍过bizData的设置方法了，请参考：http://doc.wex5.com/web-components-tree
  另外grid的树形显示也做过介绍:http://doc.wex5.com/tree-grid/

3、bizData组件主从设置

• data组件的主从设置可以参考：/UI2/demo/list/msListDetail.w
• 主data设置没有其他特别，从data的设置要加上master属性的设置，这样就可以吧主从数据进行关联。
• 当选中主数据时，从data会过滤出fOrderID字段等于主数据的主键id的数据,并显示出来
• 其中calculateRelation设置计算列index，并为计算列添加计算规则为：$row.index()+1，这样就可以显示行号了，计算列字段不对应BIZ层字段，是UI2层临时使用的字段

源代码请参考版本中模型相关：

data组件页面显示其他.w:/UI2/system/components/justep/data/demo/data.w