[擴展]EasyUI給dialog的buttons綁定click事件

通常，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對應的，實際應用中改成對應的字符串即可（中文也行）