直接附上源代码
<!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="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="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>
