EasyUI 中在DataGrid的toolbar 上使用MenuButton DataGrid的toolbar 中官方网站只是给出了linkbutton的使用方法。 但是在生产过程中,经常需要做各种菜单,所以需要在ToolBar上增加 MenuButton。尝试了很多方法都不行。 例如:{ text: '下拉菜单', iconCls: 'icon-more', menu: [{ text: '菜单项1', iconCls: 'icon-ok', handler: function () { alert('菜单项1'); } }, { text: '菜单项2', iconCls: 'icon-cancel', handler: function () { alert('菜单项2'); } }], }, 按照上述方法,产生如图:但是点击没有反应,没有下拉的效果。
时间: 2024-02-10 18:04:37 浏览: 102
DlgMenuToolbar.rar_DlgMenuToolbar_toolbar 对话框_对话框 菜单_菜单_通信软件
在 EasyUI 中,可以通过在 toolbar 中嵌套一个 menubutton 来实现下拉菜单的效果。下面是一个示例代码,可以参考一下:
```
$('#dg').datagrid({
toolbar: [{
text: '操作',
iconCls: 'icon-edit',
menu: '#mm'
}],
columns: [...]
});
$('#mm').menu({
onClick: function(item) {
alert(item.name);
}
});
```
在这个示例中,我们在 toolbar 中添加了一个 menubutton,它的 menu 属性指向一个 id 为 mm 的菜单。我们还通过调用 menu 方法来初始化菜单,指定了点击菜单项时的处理函数。
需要注意的是,menubutton 和菜单的 HTML 代码不能直接写在页面中,而是需要使用 JavaScript 动态生成。例如:
```
<div id="mm">
<div data-options="iconCls:'icon-ok'" name="item1">菜单项1</div>
<div data-options="iconCls:'icon-cancel'" name="item2">菜单项2</div>
<div class="menu-sep"></div>
<div name="exit">退出</div>
</div>
```
在这个 HTML 代码中,我们定义了一个 id 为 mm 的 div,并在其中添加了三个菜单项和一个分隔线。需要注意的是,菜单项需要使用 data-options 属性来指定 iconCls 和 name。这些菜单项和分隔线的样式可以通过 CSS 来自定义。
希望这个方法能够解决你的问题。
阅读全文