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');
                        }
                    }],
                },

按照上述方法，产生如图：

但是点击没有反应，没有下拉的效果。

已经实现DEMO.查看图片效果

保存html到文件，可直接执行，同时需要一个同目录的JSON文件，注意执行html的时候开启一个静态服务器，有问题可联系我

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用MenuButton在toolbar上</title>
    <!-- 引入EasyUI CSS文件 -->
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <!-- 引入jQuery文件 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- 引入EasyUI JS文件 -->
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 定义DataGrid -->
<table id="dg" class="easyui-datagrid" style="width:500px;height:250px"
       toolbar="#toolbar"
       data-options="
                url:'datagrid_data.json',
                method:'get',
                pagination:true,
                rownumbers:true,
                toolbar:'#tb'
           ">
    <thead>
    <tr>
        <th data-options="field:'itemid',checkbox:true"></th>
        <th data-options="field:'productid',width:80">Product ID</th>
        <th data-options="field:'productname',width:180">Product Name</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
    </tr>
    </thead>
</table>

<!-- 定义toolbar -->
<div id="toolbar">
    <div id="tb">
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-remove'">Remove</a>
    </div>
    <div id="mm1" style="width:100px;">
        <div data-options="iconCls:'icon-save',name:'save'">Save</div>
        <div data-options="iconCls:'icon-cancel',name:'cancel'">Cancel</div>
        <div class="menu-sep"></div>
        <div>Trade..</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div data-options="iconCls:'icon-ok',name:'ok'">Ok</div>
        <div data-options="iconCls:'icon-cancel',name:'cancel'">Cancel</div>
        <div class="menu-sep"></div>
        <div>Trade..</div>
    </div>
</div>

<script>
  // 模拟请求及响应
  function requestData() {
    setTimeout(function () {
      $('#dg').datagrid('loadData',
        {
          "total": 2,
          "rows":
            [
              {"itemid": 1, "productid": "1001", "productname": "Notebook", "listprice": "999.5"},
              {
                "itemid": 2,
                "productid": "1002",
                "productname": "Notebook",
                "listprice": "1999.0"
              }]
        });
    }, 2000);
  }

  // 给Add按钮绑定点击事件，模拟Ajax请求
  $('#tb .easyui-menubutton[name=add]').click(function () {
    $.messager.progress({
      title: 'Please waiting',
      msg: 'Loading data...'
    });
    requestData();  // 模拟请求
    $.messager.progress('close');
  });
</script>
</body>
</html>

同一目录下的datagrid_data.json

{
  "total": 3,
  "rows": [
    {
      "itemid": "02",
      "productid": "008",
      "productname": 20 ,
      "listprice" : "模拟数据"
    }
  ]
}

这篇博客: Easyui学习笔记（一）datagrid行编辑中的 四、toolbar设置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

var toolbar = [{
            id: 'button-view',
            text: '查询',
            iconCls: 'icon-search',
            handler: doView
        }, {
            id: 'button-add',
            text: '增加',
            iconCls: 'icon-add',
            handler: doAdd
        }, {
            id: 'button-delete',
            text: '作废',
            iconCls: 'icon-cancel',
            handler: doDelete
        }, {
            id: 'button-save',
            text: '还原',
            iconCls: 'icon-save',
            handler: doRestore
        },{
            id: 'button-edit',
            text: '保存',
            disabled:true,//行编辑控制按钮默认失效
            iconCls: 'icon-save',
            handler: saverow
        },{
            id: 'button-clear',
            text: '返回',
            disabled:true,//行编辑控制按钮默认失效
            iconCls: 'icon-back',
            handler: cancelrow
        }];