关于esyui的table表格动态列显示

最新推荐文章于 2022-08-05 15:12:15 发布

新手白菜

最新推荐文章于 2022-08-05 15:12:15 发布

阅读量718

点赞数

分类专栏： easyui 文章标签： easyui动态列显示

本文链接：https://blog.csdn.net/qq_42282196/article/details/90318638

版权

easyui 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

有两种方法可以实现：
第一种是右键表格的头，然后是下拉框显示表格头的动态显示，感觉客户体验不太好，每次只能一个一个的显示或者隐藏。
第二种是弹出一个窗口，选一个隐藏一个，客户选完之后，就可以关闭弹出窗口了。

下边是第一种的实现代码。

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;
//只需要写到js标签里即可生效。

第二种弹出层实现easyui的列动态显示

其中有关于jquery获值的时候需要注意jQuery的版本

jquery1.6以前用 $(t h i s) . a t t r (^{'} c h e c k e d^{'}) 得到的是 t r u e / f a l s e ，但是到了 1.6 以后$ (this).attr(‘checked’)就有问题了,得使用$(this).is(":checked")可以得到true和false。跟jquery的版本有关系还有一步就是给弹出层写完数据之后要及时的清空弹出层数据，这点必须要考虑到