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

 分類：

jeecg（95）  java.j2ee.andriod.ios.混合開發（97） 

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/zhangdaiscott/article/details/50314713

目錄(?)[+]

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)); } }
            ],">