dynamic-page
动态页面,使用react组件进行动态拼装页面,生成对应的模板json数据。
创建组件的方式
npm安装
npm install dynamic-page --save
基本使用方式
<Dynamic enableRedux={true} reducers={reducers} components={all} childTpl={childTpl} className="tradeBox" tpl={this.state.tpl} data={this.state.data}></Dynamic>
效果图
模板配置说明
模板形式如下
[{
"type": "Form",
"children": [
{
"type": "Form.Item",
"children": [{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "交易行"
}
}, {
"type": "Input",
"props": {
"name": "name"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "客户号"
}
}, {
"type": "InterInput",
"props": {
"name": "corp"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "标的"
}
}, {
"type": "Div",
"props": {
"name": "underly",
"className":"labelValue"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "RadioList",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "RadioList.Radio",
"props": {
"text": "买",
"name":"bid"
}
}, {
"type": "RadioList.Radio",
"props": {
"text": "卖",
"name":"ask"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "交易日"
}
}, {
"type": "Div",
"props": {
"name": "tradeDate",
"className":"labelValue"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "定价日"
}
}, {
"type": "Input",
"props": {
"name": "tradeDate"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "手数(15吨/手)"
}
}, {
"type": "NumericInput",
"props": {
"name": "num",
"decimals":"2"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "价格"
}
}, {
"type": "ThousandInput",
"props": {
"name": "price",
"decimals":"2"
}
}]
}]
},
{
"type": "Form.Item",
"children": [
{
"type": "Container",
"props": {
"className": "tradeItem"
},
"children": [{
"type": "Div",
"props": {
"value": "金额"
}
}, {
"type": "ThousandInput",
"props": {
"name": "amount",
"decimals":"2",
"disabled":true
}
}]
}]
}, {
"type": "Form.Item",
"children": [
{
"type": "NumericItem",
"props": {
"label":"手数",
"className": "tradeItem",
"name": "num",
"decimals": "2"
},
}]
},{
"type": "Form.Item",
"children": [
{
"type": "HandNumItem",
"isRedux":true,
"props": {
"label":"手数",
"className": "tradeItem",
"name": "num",
"decimals": "2"
},
}]
},
]
}];
跨组件的交互,需要打开外层的enableRedux
开关,内部使用redux
实现,同时需要传入reducers
,在要使用的组件上配置enableRedux
开关,即可在当前组件的props
上新增update
方法。
this.props.update( data,'UPDATEHAND')
这里省略掉了action
,data
对应reducer
的action
,第二是action.type
Api
enableRedux
打开redux,bool值,如果要跨组件的访问全局数据,需要设为true
childTpl
针对模板的继承操作,在tpl的基础上新增了四种操作类型
[{
action: "preinsert",
id: 1,
item: {
"type": "TextItem",
"props": {
"className": "tradeItem",
"label": "债券代码",
"name":"num",
"textcls":"labelValue"
},
"formatter":"thousand"
},
}]
locale
国际化语言
checkPermission(powerBit)
判断权限的方法,该方法接受一个权限位作为参数的钩子.权限位配置在组件的props.powerBit上.
新增全局配置options
Dynamic.options={
formatter:Formatter ,
locale:zh_CN,
checkPermission:()=>{}
}
组件
这里推荐使用react-xui
里的组件,但理论上支持所有组件的,但如果你使用了form
表单,建议你的表单组件中是使用的约束组件,并且提供onChange
事件,data
会自动绑定对应的name
值的value
属性
特殊组件
BatchUpdate
主要是做批量更新使用,props上暴露subscripe方法,参数为callback更新
{
"type": "BatchUpdate",
"isRedux": true,
props:{
updateFields:{"num":"ask"},//更新data字段映射关系
subscribe:function(callback){
setInterval(()=>{
callback({ask:Math.random()})
},2000)
}
}
}
update
this.dynamic.update([
{
name:'aaa.1.bbb',
value:999,
readOnly:true
}
])
提供数据与模板的动态绑定。可用于初始化模板选择.
compareOriginal
是否需要对原始数据进行比较,设为true
之后,会在每个组件的props
上挂载一个original
属性绑定初始数据
original
外部传递的原始数据,不设置时,直接取data
的值
showDifference
是否展示修改字段,需要设置compareOrinial
为true
. 展示的内容以国际化"global.comparevalue|@|" + item.original +'|@|'+value.value
的形式,并在组件上添加className为different-value
ignoreCompare
showDifference
为true时生效,忽略要比较的字段,name
数组.
[onChange,onClick,onFocus,onBlur]事件处理钩子
可以在事件中处理name对应控件的属性 this.control.setProps('propsname',{v:1}) //修改name为propsname的组件的属性 this.control.setReadOnly('aaa.1.qqq', true); //修改name值为'aaa.1.qqq'的组件的只读方式 this.control.setVisible('propsname', false); //修改name为propsname的组件的显示隐藏 this.control.setValue('aaa.1.qqq', '1233'); //设置组件name为'aaa.1.qqq'的value值.
模板组件可调用的方法
在组件模板中配置isRedux:true
即可使用内置的方法对数据源进行变更
sync:bool
当配置sync为true时,组件与数据源之间就会形成双向绑定,前置条件需要配置isRedux:true
sync:function(value,name)
组件内部可以通过props.sync方法更新指定name值的value,可以使用data.a.b.1='xxx'
这种写法更新深层的json对象
batchUpdate :function(data)
也是props.batchUpdate,作批量数据更新,它会把不存在的组件结构生成
fastUpdate({})
主要是对数据进行批量更新,比batchUpdate更高效,但数据的结构要是完整的,凡是组件配置了isRedux就可以使用
关于作者
https://github.com/tianxiangbing
xui
react xui组件一直在持续更新中,欢迎大家关注https://github.com/react-xui