[扩展]EasyUI给dialog的buttons绑定click事件

来源:互联网 发布:大疆视频剪辑软件 编辑:程序博客网 时间:2024/05/08 18:06

通常,Dialog中的Buttons的Click是在生成的时候就通过如下方式写好的。

官网的代码

<div id="dialog" class="easyui-dialog"         data-options="title:'My Dialog',modal:true,            buttons:[{                text:'Save',                handler:function(){...}            },{                text:'Close',                handler:function(){...}            }]">    Dialog Content.</div>

这里的Click事件就写到handler里面就好了

但是!!!

项目中有好几个页面都要用到这个Dialog,每个页面处理的肯定都不同啊,不能这么写死。

于是想到扩展一个方法,动态的绑定一下Click事件

首先看这个Dialog如何定义

<div id="dialog" class="easyui-dialog"         data-options="title:'My Dialog',modal:true,            buttons:[{                text:'Save'            },{                text:'Close'            }]">    Dialog Content.</div>

基本没做什么改变,就是移除了handler

接下来就是如何扩展了

$.extend($.fn.dialog.methods, {    bindButtonEvents: function (jq, param) {        return jq.each(function () {            var dialog = $(this);            dialog.parent().on('click', '.dialog-button a', function (e) {                var text = $(this).linkbutton('options').text;                var method = param[text];                if (method) { method(); }            });        });    }});

如何调用呢?也很简单

$('#dialog').dialog('bindButtonEvents', {    save: function () {    },    Close: function () {    }});

注:这里的save,close是跟上文中button的text对应的,实际应用中改成对应的字符串即可(中文也行)

0 0