自定义控件-JavaScript前端和Java插件数据交互原创
11人赞赏了该文章
3,972次浏览
编辑于2021年03月18日 10:09:20
创作不易,如果文章对您有帮助,请为我点击一个朴实无华的赞^_^,我会更有动力持续地更新文章。
这篇文章通过以下实例,展示自定义控件和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插件
新增自定义控件方案,并使用
效果展示:
testbt.zip(1.87KB)
推荐阅读