ZK手写JavaScript触发Command事件并传值

在项目上应用场景如下:

这里没有使用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的学习手册

ZK手写JavaScript触发Command事件并传值

在项目上应用场景如下:

解决办法如下

猜你喜欢