以window组件为例
事件
扩展事件直接定义在options中,可以再初始化组件时定义事件,也可以使用时临时定义事件。这里是组件初始化后在添加的。
使用情景:添加,插入功能。主界面表格分别点击添加和插入按钮,打开子窗体后选择一些数据,再点击同一个确定按钮。根据传入的事件处理方法,在主界面添加或插入一行记录。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> Window Content </div>
//窗体扩展按钮点击事件 $("#win").window({ onSelect: function () { alert("触发select事件"); } });
方法扩展
方法需要扩展,options中没有。
//窗体扩展按钮点击方法 $.extend($.fn.window.methods, { select: function (jq) { //获取配置项 var opts = $(jq).data('window').options; //调用配置项中定义的事件处理方法 opts.onSelect.call(jq); //点击后立即关闭子窗体 $(jq).window("close"); } });
这样在子窗体中添加一个按钮,执行 $("#win").window("select"); 就能触发onSelect事件。
在主界面的添加和插入按钮分别定义一次options配置项,就能实现同一个子窗体的确定按钮,表现不同的行为。