【JEECG技术博文】Local storage & easyui extensions

1. Local storage背景

cookie弊端:同域内http请求都会带cookie,增加带宽和流量;有个数和大小限制(约4K)。

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同。

2. Jquery.storage.js插件

项目主页,api请参考http://ek.alphaschildren.org/projects/storagejs/

对于旧版不支持html5的浏览器可以引入jquery.cookie.js插件,就可以用cookie来实现存储,同时storage的api不变,这样应用代码接口调用就独立于存储。

将相关两个js绑定到basetag的jquery里,因此每个使用到jquery的页面都可以使用storage的api来完成本地信息存储。

于此同时,修改了plug-in/tools/sysUtil.js和datagrid标签,使得datagrid在表头右键菜单中定义列之后能存储记录,并且在下次打开后能自动恢复。

在项目中使用方法:

对于有datagrid标签的页面可以直接使用名为storage的js变量来完成存储工作,例如:

<script>
storage.set( ‘somekey‘, ‘{name:”json string”}‘);
var a = storage.get(‘somekey‘);
alert(a.name);
//注意set方法放置json string,在取出时会自动转为json对象,无须自行转换
</script>
其他页面单独这样操作(前提是BaseTag引入jquery):
<script>
storage=$.localStorage; //优先使用localstorage
if(!storage)
	storage=$.cookieStorage;//在不支持localstorage的浏览器下使用cookie存储
</script>

3.Easyui-extensions

请参考项目demo:http://jqext.sinaapp.com/

jQuery && jEasyUI 扩展功能集合
    该扩展功能基于 jQuery 1.9.x/2.x 和 jQuery EasyUI 1.3.6 实现

根据jeecg的使用版本我进行了裁剪和降级,使得组件可以运行于1.3.2版本的easyui,主要是注释掉1.3.4之后加入的tip插件。

该插件可以通过basetag引入,能够对现有的easyui组件功能和api加强和扩展,在不改动easyui js的情况下扩展对象组件的属性。

4.Easyui extensions使用示例

参考常用示例中查询编辑器示例:

使用时只需在baseTag标签加一个属性jeasyuiextensions,例如

t:base 
type="jquery,easyui,tools,DatePicker,jeasyuiextensions"></t:base>

将原Datagrid 表头菜单去掉:

<script>
//去掉sysUtil.js中定义的原默认右键菜单
$.fn.datagrid.defaults.onHeaderContextMenu =null;
$.fn.treegrid.defaults.onHeaderContextMenu =null;
</script>

表头菜单就会变成如下效果:

还可以通过datagrid标签的extendParams属性增加自定义菜单,例如:

<t:datagrid name="jeecgDemoList2" title="高级查询示例"  
actionUrl="jeecgDemoController.do?datagrid"
	idField="id" queryMode="group" checkbox="true" 
extendParams="headerContextMenu: [
                { text: ‘保存列定义‘, iconCls: ‘icon-save‘, disabled: false, 
handler: function () { saveHeader(); } },
                { text: ‘自定义菜单‘, iconCls: ‘icon-reload‘, disabled: false, 
handler: function (e, field) { alert($.string.format(‘您点击了{0}‘, field)); } }
            ],"> 
时间: 2024-10-09 19:50:13

【JEECG技术博文】Local storage & easyui extensions的相关文章

【JEECG技术博文】Local storage &amp;amp; easyui extensions

1. Local storage背景 cookie弊端:同域内http请求都会带cookie,添加带宽和流量:有个数和限制大小(约4K). 在HTML5中,本地存储是一个window的属性.包含localStorage和sessionStorage.从名字应该能够非常清楚的辨认二者的差别.前者是一直存在本地的,后者仅仅是伴随着session,窗体一旦关闭就没了. 二者用法全然同样. 2. Jquery.storage.js插件 项目主页,api请參考http://ek.alphaschildre

【JEECG技术博文】简单实例讲解JEECG ONLINE表单权限控制(jeecg3 6)

简单实例讲解JEECG ONLINE表单权限控制(jeecg3.6) 原       文:http://blog.itpub.net/30066956/viewspace-1872409/ 相关博文:http://blog.itpub.net/30066956/viewspace-1868754/ 作       者: 许国杰 一.业务背景 某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 二.需求 1.角色分为:员工.经理两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评.

【JEECG技术博文】JEECG简单实例讲解自定义表单功能

JEECG简单实例讲解自定义表单功能 作者:任杰 http://blog.csdn.net/renjie0520/article/details/50286503 一.自定义表单功能简介 自定义表单是JEECG智能开发平台开发的一套可视化的表单设计功能,基于ueditor实现,bootstrap样式风格. 总体来讲,自定义表单功能概括起来如下: 1)表单预览,动态报表展示(列表数据展示) 2)表单数据填报,支持多数据表同时填报,一对多数据表填报,单表多条数据批量填报等 自定义表单支持用户自定义模

【JEECG技术博文】JEECG表单配置-树形表单

表单配置支持树型表单了,具体效果如下图: 配置说明 1.是否树:选择是. 2.树形表单父Id:表的自关联外键. 3.树形表单列表:显示树形图标的列,如上图中为[组织机构名称]. 4.默认值:最外层数据的父Id值,具体看表的设计.上图中在数据库表中的默认值为null.

【JEECG技术博文】JEECG图表配置说明

一.图表配置可以做什么? 图表配置可以通过在线配置,无需编写代码生成图形报表页面.使用highcharts.js实现,可以运行 在任何现代浏览器,包括移动终端以及IE6.目前支持曲线图.柱状图等基础报表. 二.配置说明 ? 编码:  作为此图表的唯一标识. ? y轴文字:对应y轴文字. ? x轴数据:x轴上单位数据.数据可以: 1.一个字段名. 2.一个数组对象.如:['xdata1', 'xdata2', 'xdata']. ? 是否显示明细数据:"是"显示明细数据."否&

【JEECG技术博文】JEECG国际化介绍

1.为什么要做国际化 没有国际化的框架是一个不完整的框架,特别在全球信息化的今天,国际化不再是鸡肋,而是在选择开发平台时必须首要的考试因素,特别在有些公司平台是否国际化具有一票否决要素,所以我们要搞国际化,而不是仅仅是简单的高大尚. 2.国际化的实现原理 国际化听起来简单,但要框架中要做到与框架的无缝衔接,松耦合还是有一定难度的.有些系统有时不需要做国际化,在做国际化如果快速发现哪些没有被国际化的字段等,这些问题都开发者在开发过程中实际需要解决的问题,而这一切我们都已经帮你想到了. 用户在登录页

HTML5使用local storage存储的数据是如何保存在本地的

HTML5使用local storage存储的数据是如何保存在本地的?(我使用的是chrome浏览器,chrom浏览器是用sqlite来保存本地数据的) HTML5 的local storage 是通过浏览器在本地存储的数据. 基本使用方法如下: <script type="text/javascript"> localStorage.firstName = "Tom"; alert(localStorage.firstName); </scrip

HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

Ionic2学习笔记(8):Local Storage& SQLite

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html ? ? ? ? ?Ionic2可以有两种方式来存储数据,Local Storage和SQLite ? LocalStorage ? 因为比较容易访问,所以不适合存比较敏感性的数据 比如可以存储: 用户是否登录的信息. 一些session信息等 具体用法: 进入项目目录:cd MyFirstApp 在主页设置一个按钮,点击按钮,获取LocalStorage的数据并打印在控制台