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;声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇: IIS+fastcgi下PHP运行超时问题解决办法
- 下一篇: "=="不等于".equals"
