ZK 服务端调用前台的javascript

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/85716973

Clients 

• org.zkoss.zk.util.Clients。
• 该类提供了一组通过 AU 响应操作客户端的方法。

evalJavaScript

• Clients.evalJavaScript()
• 这个方法发送 AU 响应以在客户端执行给定的JavaScript,这是在 ZK 中从服务器端调用 JavaScript的标准方法。

注意

1. 脚本组件用于指定在浏览器上运行的脚本代码。
2. 请注意 , 与 zscript 不同,脚本代码在浏览器中运行。它们通常用 JavaScript编写,与大多数浏览器都支持它。

官网例子是这样的

<zk>      
    <window id="win">           
        <button label="change color" onClick='Clients.evalJavaScript("myfunc()")' />                                 
    </window>  
   
     <script type="text/javascript">            

        function myfunc() {                
            jq("$win").css("backgroundColor", "blue");            
        } 
    </script>
</zk>

实战项目中是如何使用的呢?

VM后台代码为:

    /**
     * 初始化
     *
     * @param chk
     */
    @SmartNotifyChange({"*"})
    @Command
    public void doIntCheckbox(@BindingParam("this") Checkbox chk) {
        String color = (String) chk.getAttribute("color");
        if (StringUtils.isNotBlank(color)) {
            //设置默认选中
            chk.setChecked(true);
            //默认显示
            Clients.evalJavaScript("defaultSelection()");
        }
    }

前台的页面代码

                                         <div class="col-lg-10">
                                                <z:checkbox
                                                            onCreate="@command('doIntCheckbox',this=self)"
                                                            onClick="@command('clickCheckBox',this=self)">
                                                    <z:custom-attributes color="${vm.roleColor}"/>
                                                </z:checkbox>
                                            </div>

前台 JavaScript 代码

        <z:script>

            function defaultSelection(){
             $("#tbox").css("display","block");
            }

        </z:script>

运行的大致流程是 :

页面初始化加载Create事件 --  后台doIntCheckbox()方法执行   -- Clients.evalJavaScript("defaultSelection()");执行前台的javascript代码 -- 页面的defaultSelection()代码执行