Jquery-easyui in the DataGrid extension, hide the display header function

Today, a new feature is needed in the background, which allows the user to freely select the displayed columns and then save them to the local localstroage. So the Onheadercontextmenu method of the DataGrid in Easyui is extended.

How to use:

_this. $table. DataGrid (_.extend ({fit:true, border:false, Striped:true, Method:"Get", pagination:true, Singleselect:true, Loadmsg:"Load Data ...", 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 ("Prompt", "server busy, please try again later!") "," warning ");}, Onheadercontextmenu:function(E, field) {$.fn.easyuiextension.showhidecolumns (_this. $table, {L                        Eft: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);                    }                }            };

The effect is as follows:

Jquery-easyui in the DataGrid extension, hide the display header function