牛骨文教育服务平台(让学习变的简单)
博文笔记

easyUI datagrid 表格 表头添加菜单,实现可选列。

创建时间:2014-05-16 投稿人: 浏览次数:7402

拿其他人的code,稍微改进了下,实现更加美观的效果,方便自定义选中图标。

/**
 * @author 孙宇
 * 
 * @requires jQuery,EasyUI
 * 
 * 为datagrid、treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中
 */
var createGridHeaderContextMenu = function(e, field) {
	e.preventDefault();
	var grid = $(this);/* grid本身 */
	var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */
	var okCls = "tree-checkbox1";//选中
	var emptyCls = "tree-checkbox0";//取消
	if (!headerContextMenu) {
		var tmenu = $("<div style="width:100px;"></div>").appendTo("body");
		var fields = grid.datagrid("getColumnFields");
		for ( var i = 0; i < fields.length; i++) {
			var fildOption = grid.datagrid("getColumnOption", fields[i]);
			if (!fildOption.hidden) {
				$("<div iconCls=""+okCls+"" field="" + fields[i] + ""/>").html(fildOption.title).appendTo(tmenu);
			} else {
				$("<div iconCls=""+emptyCls+"" field="" + fields[i] + ""/>").html(fildOption.title).appendTo(tmenu);
			}
		}
		headerContextMenu = this.headerContextMenu = tmenu.menu({
			onClick : function(item) {
				var field = $(item.target).attr("field");
				if (item.iconCls == okCls) {
					grid.datagrid("hideColumn", field);
					$(this).menu("setIcon", {
						target : item.target,
						iconCls : emptyCls
					});
				} else {
					grid.datagrid("showColumn", field);
					$(this).menu("setIcon", {
						target : item.target,
						iconCls : okCls
					});
				}
			}
		});
	}
	headerContextMenu.menu("show", {
		left : e.pageX,
		top : e.pageY
	});
};
$.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
$.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。