easyui中datagrid如何结合menubutton使用

缪斯的情人 发布于 2013/07/29 22:53
阅读 3K+
收藏 0
@夏悸 如图效果:

代码如下:

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)处。求一个好的解决方案

加载中
0
缪斯的情人
缪斯的情人
自己完成了,求人不如求己
0
discry
discry
求分享好的解决方案!
0
sunjl128
sunjl128
恳求楼主提供解决方案,谢谢
0
缪斯的情人
缪斯的情人

引用来自“sunjl128”的答案

恳求楼主提供解决方案,谢谢
重写render和renderRow使其支持menubutton
缪斯的情人
缪斯的情人
回复 @sunjl128 : 代码已给出,目前不是最优方案,以后抽时间再优化,已经实现功能
sunjl128
sunjl128
能给些代码,参考一下么?谢谢~
0
缪斯的情人
缪斯的情人
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



sunjl128
sunjl128
好的,非常感谢,我参考修改~
返回顶部
顶部