自定义控件-JavaScript前端和Java插件数据交互

创作不易，如果文章对您有帮助，请为我点击一个朴实无华的赞^_^，我会更有动力持续地更新文章。

这篇文章通过以下实例，展示自定义控件和java插件如何进行交互。

1.插件初始化时，把一个数字传递给前端自定义控件，前端显示

2.前端点击按钮，将数字传递给java插件

3.java插件响应前端自定义控件的点击事件，接收数字，把数字加1，回传给前端

4.前端响应，把数字显示出来

5.一直重复234步骤：前端点击按钮，java插件计算数字自增然后回传给前端，前端显示自增后的数字

java插件代码：DemoCustomPlugIn.java

package kd.ecos.demo;

import kd.bos.ext.form.control.CustomControl;

import kd.bos.form.events.CustomEventArgs;
import kd.bos.form.plugin.AbstractFormPlugin;

import java.util.EventObject;
import java.util.HashMap;
import java.util.Map;

public class DemoCustomPlugIn extends AbstractFormPlugin {


    @Override
    public void afterBindData(EventObject e) {
        super.afterBindData(e);
        CustomControl customcontrol = this.getView().getControl("wrx1_customcontrolap");

        Map<String, Object> paramsMap = new HashMap<String, Object>();
        paramsMap.put("textKey001", "101");

        customcontrol.setData(paramsMap);
    }

    @Override
    public void beforeBindData(EventObject e) {
        super.beforeBindData(e);
    }

    @Override
    public void customEvent(CustomEventArgs e) {
        // 设计器上自定义控件的标识
        String key = e.getKey();
        // 前端通过model.invoke传给后端的数据
        String args = e.getEventArgs();
        // 前端通过model.invoke定义的事件名
        String eventName = e.getEventName();
        System.out.println("自定义控件标识: " + key + ";事件名: " + eventName + ";自定义控件回传参数: " + args);
        //this.getView().showMessage("自定义控件标识: " + key + ";事件名: " + eventName + ";自定义控件回传参数: " + args);

        int as = Integer.valueOf(args);
        as++;

        CustomControl customcontrol = this.getView().getControl("wrx1_customcontrolap");
        Map<String, Object> paramsMap = new HashMap<String, Object>();
        paramsMap.put("textKey001", as + "");
        customcontrol.setData(paramsMap);
    }



}

自定义控件代码：

index.js

/**
 *  自定义控件书写模板
 */
(function(KDApi, $){
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function testbt (model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    testbt.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props){
            initFunc(this.model, props)
        },
        update: function(props){
            updateFunc(this.model, props)
        },
        destoryed: function(){
            textFromProps = null
        }
    }

    var textFromProps

    var initFunc = function(model, props) {
        // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
        KDApi.loadFile('./css/testbt.css', model, function() {
            // 后端插件通过setData传给前端的数据，前端可以通过props.data去获取
            //var text = props.data && props.data.text || ''
            textFromProps = props.data.textKey001 + ''
            // 通过路径去获取html字符串，第一个参数是路径，第二个参数是model，第三个参数是HTML模板中变量的值
            KDApi.getTemplateStringByFilePath('./html/testbt.html', model, {
                text: textFromProps
            }).then(function(result) {
                model.dom.innerHTML = result
                initEvent(model, props)
            })
        })
    }

    var initEvent = function(model, props){
        //内置了jquery对象，可直接使用$
        $('.testbt', model.dom).click(function(){
            // model.invoke，用于给后端发送请求，第一个参数是事件名，可自定义；第二个参数是发送给后端的数据，可以是任意类型
            model.invoke('click', textFromProps)
        })
    }

    var updateFunc = function(model, props) {
        textFromProps = props.data.textKey001 + ''
        $('.testbt', model.dom).text(textFromProps)
    }

    // KDApi注册一个id号，这个id号要和控件方案的id号对应
    KDApi.register('testbt', testbt)
})(window.KDApi, jQuery) // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4

testbt.html

<div>
    <button id="button" class="testbt"> 点我加一： <%= text %> </button>
</div>

testbt.css

.testbt{
    width: 200px;
    height: 50px;
}

注册java插件

新增自定义控件方案，并使用

效果展示：