今天，后台中需要新增一个功能，用户可以*选择显示的列，之后保存到本地localStroage中。所以扩展了easyui中datagrid的onHeaderContextMenu方法。
使用方法：
_this.$table.datagrid(_.extend({
fit: true,
border: false,
striped: true,
method: "get",
pagination: true,
singleSelect: true,
loadMsg: "加载数据中...",
columns: _this.getTableColumns(),
onResize: function () {
if (_this.$ajaxDialog) {
_this.$ajaxDialog.dialog("restore");
_this.$ajaxDialog.dialog("maximize");
}
},
onSelect: function (rowIndex, rowData) {
_this.currentRow = rowData;
_this.currentRowIndex = rowIndex;
_this.toolbarViewModel.disabled(false);
},
onLoadError: function () {
// $.messager.alert("提示", "服务器忙，请稍后再试！", "warning");
},
onHeaderContextMenu: function (e, field) {
$.fn.easyuiExtension.showHideColumns(_this.$table, {
left: e.clientX,
top: e.clientY
});
e.preventDefault();
},
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid("unselectAll");
$(this).datagrid("selectRow", rowIndex);
if (_this.$menu) {
_this.$menu.menu("show", {
left: e.pageX,
top: e.pageY
});
}
}
}, options));
$.fn.easyuiExtension = {
showHideColumns: function ($table, position) {
var $menus = $(document.createElement("div"));
var canClick = true, nonHiddenCount = 0;
var columnsFields = $table.datagrid("getColumnFields"),
columns = [],
columsDetail;
for (var i in columnsFields) {
columsDetail = $table.datagrid("getColumnOption", columnsFields[i]);
columns.push(columsDetail);
}
if (columns.length) {
$menus.menu({
hideOnUnhover: false,
duration: 200,
onHide: function () {
setTimeout(function () {
$menus.menu("destroy");
}, 200);
},
onClick: function (item) {
if (canClick || !item.iconCls) {
$table.datagrid((item.iconCls ? "hideColumn" : "showColumn"), item.id);
}
}
});
for (var i in columns) {
var item = columns[i];
!item.hidden && nonHiddenCount++;
$menus.menu("appendItem", {
text: item.title,
id: item.field,
iconCls: item.hidden ? "" : "icon-ok"
});
}
canClick = nonHiddenCount > 1;
$menus.menu("show", position);
}
}
};
效果如下：