EasyUI组件新增方法与事件

以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配置项，就能实现同一个子窗体的确定按钮，表现不同的行为。