版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/85267071
在项目上应用场景如下:
- 这里没有使用zk的自带颜色组件,用的是input输入框,所以值无法传入FormVM页面,这里手写js代码,通过绑定事件获取到input的值然后,传入到FormVM里面
解决办法如下
1),form.zul页面如下
<z:zk xmlns:z="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.zkoss.org/2005/zk/native"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<z:div zclass="row" id="addRole"
validationMessages="@id('vmsgs')"
viewModel="@id('vm')@init('com.tuogo.sephora.rb.system.zk.mvvm.SecRoleFormVM')"
form="@id('m') @load(vm.domainModel) @save(vm.domainModel,before={'submit'})
@validator('formBeanValidator',prefix='p_',for={'submit'})">
<div class="form-group">
<label class="col-lg-2 control-label">
<span style="color:red">*</span>Primary Color</label>
<div class="col-lg-10">
<input id="color" type="color" value="#ff5e5e" />
</div>
</div>
<z:script>
zk.afterMount(function() {
$('#color').change(function(event){
zkbind.$('$addRole').command('test',{roleColor:$('#color').val()});
});
});
</z:script>
</z:div>
</z:zk>
- 这里有几点需要注意 $addRole 是整个页面最大的div的id --其中ZK获取id的方式是$不是#
- test是后台接收的方法名 其中传递的值是在{key : value}的方式
2),FormVM接收的类如下
@ToServerCommand("*")
@Init(superclass = true)
@AfterCompose(superclass = true)
public class SecRoleFormVM extends BaseDivFormVM<SecUserRole, Long> {
private String color;
@Command
public void test(@BindingParam("roleColor") String roleColor) {
if (null != roleColor) {
color = roleColor;
}
}
}
- 这里需要用到 @ToServerCommand("*") 这个注解
- 通过@BindParam("key") String str 的方式来获取传递进来的值
这样就可以动态拿到用户所选的值,效果如下
可以看下zk的学习手册