jquery easyui datagrid 保存/加载自定义配置每列属性

直接附上源代码

<!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>

原文地址:https://www.cnblogs.com/neozhu/p/11625514.html

时间: 2024-11-05 18:58:06

jquery easyui datagrid 保存/加载自定义配置每列属性的相关文章

jquery easyui datagrid 动态 加载列

实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似oracle web版的sql查询. 前台主要js为: Js代码   function sqlSearch(){ var sqlStatement = $.trim($("#sqlStatementId").val()); if(sqlStatement == null || sqlState

03 jquery easyui 之 easyLoader 加载器

EasyLoader 是可以加载CSS样式.脚本.动态加载easyui组件.需要使用到easyloader.js,就不使用jquery.easyui.min.js 加载 EasyUI 模块 easyloader.base = '../'; // 设置 easyui 的基本目录 easyloader.load('messager', function(){ // 加载指定的模块         $.messager.alert('Title', 'load ok'); }); 通过相对 url 加

(一)jQuery EasyUI 的EasyLoader加载原理

1.第一次看了官网的demo,引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery的UI快速搭建组件.EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件,需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了. 比如需要加载linkbutton组件,则可以用下面的两种方式来加载: 第一种通过

基于.net 的加载自定义配置-误操作

有时候 需要 将程序加载自定义的配置文件,除了自己写解析xml文件.内置的ConfigutionManager对象 是个不错的选项. 按照 app.config 的方式,做一个副本.然后从你的配置文件中,加载指定的配置 键值对! //方法1-可以读取任意位置的xml文件 ExeConfigurationFileMap filemap = new ExeConfigurationFileMap(); filemap.ExeConfigFilename = QuartzConfigPath; //f

Easyui datagrid重新加载数据

Jquery Easy ui datagrid的重新加载数据方法loadData中的data参数需要进行转换,如下加粗代码 实战示例 function fenxi (){ var startDate = $("#startDate").val(); var endDate = $("#endDate").val(); var state = $("#state").val(); var parameter = "startDate=&q

easyui datagrid 动态加载数据 渲染问题

$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] , //数据加载成功以后渲染 onLoadSuccess: function() { $.parser.parse(

转 -- MVC+EF easyui dataGrid 动态加载分页表格

首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav

jquery easyui tree异步加载的简单用法

jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque

【颗粒归仓】(一)jQuery easyui datagrid 的数据加载

其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非url调用).在项目中我用到的以及研究别人代码中用到的普遍是第一种,下面就分别对他们进行总结. 一.ajax加载目标url返回的json数据 首先明确,通过ajax加载目标url返回的值不一定是json格式,在http://blog.csdn.net/luckystar689/article/details/5