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

直接附上源代码

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Format DataGrid Columns - jQuery EasyUI Demotitle>
    <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 Tableh2>
    <p>Transform DataGrid from an existing, unformatted html table.p>
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transforma>

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid('reload')">reloada>
        <a href="#" class="easyui-linkbutton" onclick="javascript:saveconfig()">save configa>
    div>
    <table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
        <thead>
            <tr>
                <th data-options="field:'itemid'">Item IDth>
                <th data-options="field:'productid'">Productth>
                <th data-options="field:'listprice',align:'right'">List Priceth>
                <th data-options="field:'attr1',hidden:true">Attributeth>
            tr>
        thead>
        <tbody>
            <tr>
                <td>EST-1td><td>FI-SW-01td><td>36.50td><td>Largetd>
            tr>
            <tr>
                <td>EST-10td><td>K9-DL-01td><td>18.50td><td>Spotted Adult Femaletd>
            tr>
            <tr>
                <td>EST-11td><td>RP-SN-01td><td>28.50td><td>Venomlesstd>
            tr>
            <tr>
                <td>EST-12td><td>RP-SN-01td><td>26.50td><td>Rattlelesstd>
            tr>
            <tr>
                <td>EST-13td><td>RP-LI-02td><td>35.50td><td>Green Adulttd>
            tr>
        tbody>
    table>

    <div id="mm" class="easyui-menu" style="width:120px;">
            <div onclick="append()" data-options="iconCls:'icon-add'">Appenddiv>
            <div onclick="removeit()" data-options="iconCls:'icon-remove'">Removediv>
            <div class="menu-sep">div>
            <div onclick="expand()">Expanddiv>
            <div onclick="collapse()">Collapsediv>
        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 = $('
').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>
View Code

jquery easyui datagrid 保存/加载自定义配置每列属性_第1张图片

 

转载于:https://www.cnblogs.com/neozhu/p/11625514.html

你可能感兴趣的:(jquery easyui datagrid 保存/加载自定义配置每列属性)