JEECG Local storage&Easyui extension

【JEECG Local storage&Easyui extension】是一个关于在JEECG框架中使用HTML5的本地存储机制（Local Storage）和EasyUI扩展功能的实践。本文将详细介绍这两个方面及其在项目中的应用。 1. **Local Storage** Local Storage是HTML5引入的一种存储机制，它允许Web应用程序在用户本地存储数据，而无需依赖Cookie。与Cookie相比，Local Storage有以下优势： - 不会在每次HTTP请求中被发送，从而减少了带宽消耗和流量。 - 存储容量更大，通常可以达到5MB，远超Cookie的4KB限制。 - 存储的数据在浏览器会话结束后依然保留，而Session Storage只在当前浏览器会话期间有效。 `jQuery.storage.js`是一个插件，用于提供一个统一的API，无论浏览器是否支持Local Storage。如果浏览器不支持Local Storage，它会自动回退到使用Cookie。通过这个插件，开发者可以方便地使用`storage.set()`和`storage.get()`方法来存取数据，即使在不支持Local Storage的浏览器中，接口保持一致。 2. **JEECG中的Local Storage应用** 在JEECG项目中，`plug-in/tools/sysUtil.js`和datagrid标签已被修改，以利用Local Storage保存和恢复datagrid的列定义。当用户自定义列并关闭页面后，这些设置将在下次打开时自动恢复。开发者可以像下面这样直接在页面中使用`storage`变量进行存储操作： ```javascript storage.set('somekey', '{name:"json string"}'); var a = storage.get('somekey'); alert(a.name); // 注意set方法接收的json字符串会被自动转化为json对象 ``` 3. **Easyui Extensions** Easyui Extensions是一组基于jQuery和jQuery EasyUI的增强功能，针对JEECG项目的版本进行了裁剪和降级，确保在EasyUI 1.3.2版本上也能运行。它扩展了EasyUI组件的功能和API，无需修改原始的EasyUI JavaScript库。要使用这些扩展，可以在BaseTag中添加`jeasyuiextensions`属性，如`<t:basetype="jquery,easyui,tools,DatePicker,jeasyuiextensions"></t:base>`。 4. **Easyui Extensions的使用** 例如，你可以通过设置`datagrid`的`extendParams`属性来添加自定义的表头菜单，如下所示： ```javascript // 去掉默认的sysUtil.js定义的右键菜单 $.fn.datagrid.defaults.onHeaderContextMenu = null; $.fn.treegrid.defaults.onHeaderContextMenu = null; // 添加自定义菜单 <t:datagrid ... extendParams="headerContextMenu: [ { text: '保存列定义', iconCls: 'icon-save', disabled: false, handler: function () { saveHeader(); } }, { text: '自定义菜单', iconCls: 'icon-reload', disabled: false, han... } ]"> ``` 总结来说，JEECG Local storage&Easyui extension整合了Local Storage的便利性和EasyUI的扩展功能，提供了更强大、更灵活的Web应用程序开发环境。通过Local Storage，开发者可以更高效地处理用户偏好和数据持久化，而EasyUI Extensions则增强了用户界面的交互性和可定制性。结合这两者，JEECG项目可以提供更优秀的用户体验和开发效率。