easyUI datagrid 表格 表头添加菜单,实现可选列。
拿其他人的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;
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。