EasyUI随笔-splitbutton、menubutton伪动态添加

最新推荐文章于 2021-06-16 17:17:18 发布

zhiming2076

最新推荐文章于 2021-06-16 17:17:18 发布

阅读量2.2k

点赞数

分类专栏： EasyUI 文章标签： easyui menubutton splitbutton onclick 事件

本文链接：https://blog.csdn.net/zhiming2076/article/details/40747239

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之所以说是“伪”动态，其实还是要借助Jquery来实现部分功能，而不是完全使用EasyUI的接口；这点不像ExtJs。

先说需求：

就是想做一个可以下拉的按钮组（如下图），这可以用splitbutton或menubutton实现！可采用下列两种方式（都是官网的）：

方式1、HTML标记法

<a href="javascript:void(0)" id="mb" class="easyui-menubutton" 
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>

方式2、伪脚本

<a href="javascript:void(0)" id="mb">Edit</a>
<div id="mm" style="width:150px">
...
</div>

$('#mb').menubutton({
    iconCls: 'icon-edit',
    menu: '#mm'
});

进而提出问题：

样子都建好了，那，我们最关心的按钮单击事件怎么处理？

借鉴了很多名家之言，发现，都是“再用Jquery方法”之类的说法，这多少感觉有点儿别扭！毕竟，还是有点儿想“全写代码”的方式来解决，不想每次都要先标记个Div，特别是这种子部件的情况。就是想在处理父级的时候，就能一并处理掉子键的事件呀什么的，比如单击。

关于处理这种子部件的事件，我是这样子的：

A、Jquery附加子菜单容器（必须）：

$('#personalConfig').append("<div id=\"personalConfigMenu\"></div>");

B、生成menubutton（必须）：

$('#personalConfig').menubutton({
                iconCls: 'icon-user',
                menu: '#personalConfigMenu'
            });

C、追加子键，并处理事件

            $('#personalConfigMenu').menu('appendItem', {
                text: '注销',
                iconCls: 'icon-logoff',
                onclick: function () { alert('New Item') }
            });

注意，B处生成的是menubutton，而C处使用的是menu方法，这是因为menubutton继承自menu的缘故。其实appendItem方法，就是往personalConfigMenu容器中追加一个div而已。

这样，至少不用在页面里面去事先写HTML标记了