直接附上源代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Format DataGrid Columns - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="css/material/easyui.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Transform DataGrid from Table</h2>

    <p>Transform DataGrid from an existing, unformatted html table.</p>

    <div style="margin:20px 0;">

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a>

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid('reload')">reload</a>

        <a href="#" class="easyui-linkbutton" onclick="javascript:saveconfig()">save config</a>

    </div>

    <table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">

        <thead>

            <tr>

                <th data-options="field:'itemid'">Item ID</th>

                <th data-options="field:'productid'">Product</th>

                <th data-options="field:'listprice',align:'right'">List Price</th>

                <th data-options="field:'attr1',hidden:true">Attribute</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>

            </tr>

            <tr>

                <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>

            </tr>

            <tr>

                <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>

            </tr>

            <tr>

                <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>

            </tr>

            <tr>

                <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>

            </tr>

        </tbody>

    </table>

    <div id="mm" class="easyui-menu" style="width:120px;">

            <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>

            <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>

            <div class="menu-sep"></div>

            <div onclick="expand()">Expand</div>

            <div onclick="collapse()">Collapse</div>

        </div>

    <script>

        function reloadcols(){

            $('#dg').datagrid({

                columns:JSON.parse(localStorage.getItem('#dgcolumens'))

        });

        }

        function saveconfig(){

            const opts=$('#dg').datagrid('options');

                console.log(opts.columns);

                localStorage.setItem('#dgcolumens', JSON.stringify(opts.columns));

        }

        (function($){

            function buildMenu(target){

                var state = $(target).data('datagrid');

                if (!state.columnMenu){

                    state.columnMenu = $('<div></div>').appendTo('body');

                    state.columnMenu.menu({

                        onClick: function(item){

                            if (item.iconCls == 'tree-checkbox1'){

                                $(target).datagrid('hideColumn', item.name);

                                $(this).menu('setIcon', {

                                    target: item.target,

                                    iconCls: 'tree-checkbox0'

                                });

                            } else if (item.iconCls == 'tree-checkbox0') {

                                $(target).datagrid('showColumn', item.name);

                                $(this).menu('setIcon', {

                                    target: item.target,

                                    iconCls: 'tree-checkbox1'

                                });

                            }else{

                            }

                            const opts=$(target).datagrid('options');

                            localStorage.setItem(opts.id, JSON.stringify(opts.columns));

                        }

                    })

                    state.columnMenu.menu('appendItem', {

                            text: '保存配置',

                            name: 'saveconfigitem',

                            iconCls: 'icon-save'

                        });

                    var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));

                    for(var i=0; i<fields.length; i++){

                        var field = fields[i];

                        var col = $(target).datagrid('getColumnOption', field);

                        state.columnMenu.menu('appendItem', {

                            text: col.title,

                            name: field,

                            iconCls: !col.hidden?'tree-checkbox1':'tree-checkbox0'

                        });

                    }

                }

                return state.columnMenu;

            }

            $.extend($.fn.datagrid.methods, {

                columnMenu: function(jq){

                    return buildMenu(jq[0]);

                }

            });

        })(jQuery);

    $(()=>{

        $('#dg').datagrid({

            onHeaderContextMenu: function(e, field){

                    e.preventDefault();

                    $(this).datagrid('columnMenu').menu('show', {

                        left:e.pageX,

                        top:e.pageY

                    });

                },

            onLoadSuccess:function(data){

                console.log(data);

            },

            onBeforeLoad:function(p){

                console.log(p);

            }

        });

        $('#dg').datagrid({

                columns:JSON.parse(localStorage.getItem('dg'))

        });

    })

    </script>

</body>

</html>

jquery easyui datagrid 加载保存好的自定义设置的列属性的更多相关文章

  1. jquery easyui datagrid 加每页合计和总合计

    jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...

  2. JQuery EasyUI 引用加载分析

    easyui是什么,就不介绍了,接触到前端的就算没用过,肯定也应该听说过.其次,本文不是介绍它提供如calendar.tree等这些功能如何使用的,这些官网上介绍都很详细,中文的网上也不少.本文是从e ...

  3. Easyui datagrid加载数据时默认全选的问题

    问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...

  4. jquery easyui tab加载内容的几种方法

    转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...

  5. 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...

  6. easyui datagrid 加载静态文件中的json数据

    本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...

  7. easyui datagrid 加载两次请求，触发两次ajax 请求 问题

    datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"> ...

  8. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  9. easyui datagrid加载数据和分页

    <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...

随机推荐

  1. 使用EF批量新增数据十分缓慢

    使用EF来批量新增数据,发现效率非常的差,几千条数据时甚至需要几分钟来执行,迫于无奈使用sql来执行了. 今天偶然看到一篇关于EF的文章,才发觉原来是自己对EF不够了解的原因. 一般新增时我们是将所有 ...

  2. Delphi2007 在Win10 下运行报错 Assertion failure

    Delphi2007 原来安装在Win7 下 运行正常, 自从升级到Win10 ,新建工程运行然后关闭报错, 报错信息如下: ---------------------------bds.exe - ...

  3. Try-Catch-Finally语句块执行问题

    Try-Catch-Finally语句块执行问题 记录一个今天某公司的面试问题,其实我问题回答对了,但是面试官问我动手验证过没有,这还真没有,纯理论,被怼惨了,希望自己能变得更强大. Try-Catc ...

  4. [b0016] python 归纳 (二)_静态方法和类方法

    # -*- coding: UTF-8 -*- """ 测试 类的静态方法,类方法 @staticmethod @classmethod 总结: 1. self 指向类对 ...

  5. bat弹出确认或取消窗口

    需要在bat脚本里面弹出取消/确认框提示,可以用下面的案例: 示例: @echo off setlocal enabledelayedexpansion set Vbscript=Msgbox(&qu ...

  6. bat延迟执行脚本，利用choice实现定时执行功能

    choice是选择语句,具体语法另外再讲.今天利用它来实现定时执行功能.废话少说直接上代码: 示例一: @echo off for %%a in (我 是 一 个 中 国 人) do ping -n ...

  7. jmeter连接并使用mysql数据

    一.下载数据库驱动,放至D:\apache-jmeter-2.13\lib\ext目录下 二.打开jmeter,右键添加->配置文件->JDBC Connection Configurat ...

  8. 白话SCRUM之五：四种会议

    在SCRUM方法中定义了4种会议活动: Sprint planning Daily meeting Sprint review Sprint retrospective 除去开发活动外这4种会议构成了 ...

  9. Linux系统中的load average（平均负载/运行队列）

    1.load average 的含义 系统负载(System Load)是系统CPU繁忙程度的度量,即有多少进程在等待被CPU调度(进程等待队列的长度) linux系统中的Load对当前CPU工作量的 ...

  10. 使用nginx配置带有权限验证的反向代理

    环境:centos6u3 1.安装nginx (1)上传nginx nginx-1.14.0.tar.gz.可以从nginx官网下载http://nginx.org/en/download.html ...