easyui中datagrid如何结合menubutton使用
@夏悸 如图效果：
代码如下：
function menubtn(value, row, options) {
var opt = options || {};
var len = opt.option.length;
var div = $('<div></div>');
for (var i = 0; i < len; i++) {
var op = opt.option[i];
var span = $('<a href="javascript:void(0)" id="menubtn" plain="true" iconCls="'
+ op.icon + '" menu="#m1"></a>');
span.append(op.text);
var menu = $(span).menubutton();
$(menu.menubutton('options').menu).menu({
onClick:function(item){
alert(item.text);
}
});
span.appendTo(div);
}
// $(menus.menubutton('options').menu).menu({
// onClick:function(item){
// alert(item.text);
// }
// })
return div.html();
}现在的问题是，如果使用这种方式，无法触发下拉显示了，也就是showMenu不起作用了。如果使用另外一种方式在<a></a>中自定义onmouseover方法，菜单能显示，但是出现位置偏移，位置处于（0,0）处。求一个好的解决方案如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
好的，非常感谢，我参考修改~
function linkbtn(value, options) { var opt = options || {}; var len = opt.option.length; var div = $('<div></div>'); for (var i = 0; i < len; i++) { var op = opt.option[i]; if (!op.title) op.title = ""; var html = '<a href="javascript:void(0)" style="color:#166DCC" class="easyui-linkbutton" plain="true" iconCls="' + op.icon + '"'; if (op.onclick) { html = html + '" onclick=' + op.onclick + '("' + value + '")'; } var span = $(html + ' title=' + op.title + '></a>'); var hide = ''; if (op.hide) span.css("display", "none"); span.append(op.text); span.appendTo(div); } return div.html(); } function menubtn(value, index, options) { var opt = options || {}; var len = opt.option.length; var div = $('<div></div>'); if ($("div[id^='submenu']")) $("div[id^='submenu']").remove(); for (var i = 0; i < len; i++) { var op = opt.option[i]; var span = $('<a href="javascript:void(0)" class="easyui-menubutton" style="color:#166DCC" id="menubtn' + index + '" plain="true" iconCls="' + op.icon + '" menu="#submenu' + index + '"></a>'); span.append(op.text); span.appendTo(div); var items = op.items || {}; var subdiv = $('<div id="submenu' + index + '"></div>'); for (var j = 0; j < items.length; j++) { var item = items[j]; var hide = ''; if (item.hide) hide = 'style=display:none' var sub = $('<div iconCls="' + item.icon + '" onclick=' + item.onclick + '("' + value + '") ' + hide + '>' + item.text + '</div>'); sub.appendTo(subdiv); } subdiv.appendTo(div); } return div.html(); }/** * grid 行扩展 */ $.extend($.fn.datagrid.defaults.view, { render : function(target, container, frozen) { var state = $.data(target, "datagrid"); var opts = state.options; var rows = state.data.rows; var fields = $(target).datagrid("getColumnFields", frozen); if (frozen) { if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) { return; } } if (opts.singleSelect) { var ck = $(".datagrid-header-row .datagrid-header-check"); $(ck).empty(); } var table = ["<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>"]; for (var i = 0; i < rows.length; i++) { var cls = (i % 2 && opts.striped) ? "class="datagrid-row datagrid-row-alt"" : "class="datagrid-row""; var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : ""; var style = styleValue ? "style="" + styleValue + """ : ""; var rowId = state.rowIdPrefix + "-" + (frozen ? 1 : 2) + "-" + i; table.push("<tr id="" + rowId + "" datagrid-row-index="" + i + "" " + cls + " " + style + ">"); table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i])); table.push("</tr>"); } table.push("</tbody></table>"); // $(container).html(table.join("")); $(container)[0].innerHTML = table.join(""); // 增加此句以实现,formatter里面可以返回easyui的组件，以便实例化。例如：formatter:function(){ // return "<a href='javascript:void(0)' // class='easyui-linkbutton'>按钮</a>" }} $.parser.parse(container); }, renderRow : function(target, fields, frozen, rowIndex, rowData) { var opts = $.data(target, "datagrid").options; var cc = []; if (frozen && opts.rownumbers) { var rownumber = rowIndex + 1; if (opts.pagination) { rownumber += (opts.pageNumber - 1) * opts.pageSize; } cc .push("<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">" + rownumber + "</div></td>"); } for (var i = 0; i < fields.length; i++) { var field = fields[i]; var col = $(target).datagrid("getColumnOption", field); if (col) { // 修改默认的value取值，改了此句之后field就可以用关联对象了。如：people.name var value = jQuery.proxy(function() { try { return eval('this.' + field); } catch (e) { return ""; } }, rowData)(); var styleValue = col.styler ? (col.styler(value, rowData, rowIndex) || "") : ""; var style = col.hidden ? "style="display:none;" + styleValue + """ : (styleValue ? "style="" + styleValue + """ : ""); cc.push("<td field="" + field + "" " + style + ">"); if (col.checkbox) { var style = ""; } else { var style = styleValue; if (col.align) { style += ";text-align:" + col.align + ";"; } if (!opts.nowrap) { style += ";white-space:normal;height:auto;"; } else { if (opts.autoRowHeight) { style += ";height:auto;"; } } } cc.push("<div style="" + style + "" "); if (col.checkbox) { cc.push("class="datagrid-cell-check "); } else { cc.push("class="datagrid-cell " + col.cellClass); } cc.push("">"); if (col.checkbox) { var type = opts.singleSelect == true ? "radio" : "checkbox"; cc.push("<input type=" + type + " name="" + field + "" value="" + (value != undefined ? value : "") + ""/>"); } else { if (col.formatter) { cc.push(col.formatter(value, rowData, rowIndex)); } else { cc.push(value); } } cc.push("</div>"); cc.push("</td>"); } } return cc.join(""); } });使用：
在formatter方法里面：
var menus = menubtn(value, index, { option : [{ text : '更多', icon : 'icon-list', items : [{ text : '策略', icon : 'icon-boxes', onclick : 'showPolicy', hide : !is_authors_policy }, { text : '激活', icon : 'icon-enter', onclick : 'activeHost', hide : isActive }, { text : '驳回', icon : 'icon-enter', onclick : 'rejectHost', hide : isActive }, { text : '卸载', icon : 'icon-tools', onclick : 'uninstallHost', hide : uninstall }, { text : '强制卸载', icon : 'icon-exit', onclick : 'forceUninstallHost', hide : fore_uninstall }] }] }); return menus;@
sunjl128
能给些代码，参考一下么？谢谢~
回复
代码已给出，目前不是最优方案，以后抽时间再优化，已经实现功能
恳求楼主提供解决方案，谢谢
求分享好的解决方案！
自己完成了，求人不如求己