In jquery-easyui, The datagrid extension hides the display header function, and jqueryeasyui

In jquery-easyui, The datagrid extension hides the display header function, and jqueryeasyui

Today, you need to add a feature in the background. You can select the displayed columns and save them to the local localStroage. Therefore, the onHeaderContextMenu method of the datagrid in easyui is extended.

Usage:

_ This. $ table. datagrid (_. extend ({fit: true, border: false, striped: true, method: "get", pagination: true, singleSelect: true, loadMsg: "loading 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", "the server is busy. Please try again later! "," 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);                    }                }            };

The effect is as follows: