easyui datagrid自定义操作列按钮组使用menubutton

easyui自定义操作列按钮使用menubutton

有个需求，easyui datagrid表格新加一列操作列，按钮太多所以用menubutton来显示，但是这样显示的按钮无法获取至当前点击行的数据。

具体思路，屏蔽menubutton的光标经过显示，限制只能点击显示，点击更多时将自定义属性的index赋值给全局变量，通过全局变量来确定选中了哪一行。

以下是具体实现代码：

在表格中定义行formatter属性设置按钮，给按钮一个自定义属性。

{
      field: 'Action', title: '操作', width: 170, align: "center", formatter: function (value, row, index) {
             var id = row.InformationID;      
             var a = "<span class='morebtn'><a name='lock' href='#' onclick=\"LockData('" + index + "', 'lock');\" >锁定</a> &nbsp; | &nbsp;";
             var b = "<span class='morebtn'><a name='lock' href='#' onclick=\"LockData('" + index + "', 'notlock');\" >解锁</a> &nbsp; | &nbsp;";
             //menubutton按钮组
             var c = "<a name='mm' href='#' data-rowindex='" + index + "' >更多</a></span>";
             if (row.InfoStatus != "已锁定") {
                 return a + c;
             } else {
                 return b + c;
             }
         }
}

在onLoadSuccess中渲染menubutton样式，并写入具体操作

//定义一个全局变量用来获取选中行索引
var SelectRow = undefined;

onLoadSuccess: function (data) {
			//在这里渲染样式 duration是为了将按钮设置为只能点击触发，光标经过不会显示
            var ddlMenu = $('a[name=mm]').menubutton({
                menu: '#mm1',
                duration:9999,
                onClick: function () {
                    SelectRow = $(this).attr("data-rowindex");
                }
            });
          
          	//在这里获取当前行
            $(ddlMenu.menubutton('options').menu).menu({
                onClick: function (item) {
                    //item.Text可以获取点击菜单的文本来进行判断
                    alert(item.text);
                    var rows = $('#grid').datagrid('getRows');//获得所有行
                    var row = rows[SelectRow];//根据index获得其中一行。
                    alert(row);
                }
            })
        },

HTML

<div id="mm1" class="easyui-menu">
    <div>复写</div>
    <div>催办</div>
</div>

效果：