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> | ";
var b = "<span class='morebtn'><a name='lock' href='#' onclick=\"LockData('" + index + "', 'notlock');\" >解锁</a> | ";
//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>
效果: