"JEECG Technology Blog" Local Storage & Easyui Extensions

1. Local Storage Background

Cookie drawback: HTTP requests within the same domain will have cookies, increase bandwidth and traffic, and have a number and size limit (about 4K).

In HTML5, the local storage is a window property, including Localstorage and Sessionstorage, from the name should be able to clearly identify the difference between the former is always local, the latter is only accompanied by the session, the window once closed. The usage is exactly the same.

2. Jquery.storage.js Plug-in

Project homepage, API please refer to http://ek.alphaschildren.org/projects/storagejs/

For older browsers that do not support HTML5, the Jquery.cookie.js plugin can be introduced with cookies, and the storage API is not changed, so that the application code interface calls are stored separately.

The relevant two JS is bound to the Basetag jquery, so each page that uses jquery can use the storage API to complete the local information store.

At the same time, the plug-in/tools/sysutil.js and DataGrid tags are modified so that the DataGrid can store records after the column is defined in the right-click menu of the header, and can be restored automatically the next time it is opened.

To use the method in your project:

For a page with a DataGrid tag, you can use the JS variable named storage to do the storage work, for example:

<script>storage.set (' Somekey ', ' {name: ' JSON string '} '); var a = Storage.get (' Somekey '); alert (a.name);// Note that the Set method places a JSON string, which is automatically converted to a JSON object when it is removed, without the need to self-convert </script> other pages alone (provided Basetag introduces jquery): <script>storage= $.localstorage; Priority use of Localstorageif (!storage) storage=$.cookiestorage;//using cookie Storage in browsers that do not support localstorage </script>

3.easyui-extensions

Please refer to Project Demo:http://jqext.sinaapp.com/

JQuery && Jeasyui Extension Feature Collection
This extension is implemented based on the jquery 1.9.x/2.x and jquery Easyui 1.3.6

Based on the version of JEECG, I have cropped and degraded it so that the component can run on the 1.3.2 version of Easyui, mostly commented out 1.3.4 after adding the tip plugin.

The plug-in can be introduced through Basetag, and can be enhanced and extended to existing Easyui component functions and APIs, extending the properties of the object component without altering the Easyui JS.

4.Easyui Extensions Use example

Examples of query editors in the reference common examples:

use only when the Basetag Tag plus a property jeasyuiextensions , For example

T:base

Type= "Jquery,easyui,tools,datepicker,jeasyuiextensions" ></t:base>

the original Datagrid The table header menu is removed:

<script>//Remove the original default right-click menu $.fn.datagrid.defaults.onheadercontextmenu =null;$ defined in Sysutil.js. Fn.treegrid.defaults.onHeaderContextMenu =null;</script>

The header menu changes to the following effect:

you can also pass DataGrid Label's Extendparams property to add a custom menu, for example:

<t:datagrid name= "JeecgDemoList2" title= "Advanced Query Example"

Actionurl= "Jeecgdemocontroller.do?datagrid" idfield= "id" querymode= "group" checkbox= "true"

extendparams= "Headercontextmenu: [                {text: ' Save column definition ', iconcls: ' Icon-save ', Disabled:false,

Handler:function () {Saveheader ()}},                {text: ' custom menu ', Iconcls: ' Icon-reload ', Disabled:false,

Handler:function (E, field) {Alert ($.string.format (' you clicked {0} ', field));}}            

"JEECG Technology Blog" Local Storage & Easyui Extensions