1.?Local?storage背景

? ? cookie弊端：同域內(nèi)http請求都會帶cookie，增加帶寬和流量；有個數(shù)和大小限制（約4K）。

? ? 在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應(yīng)該可以很清楚的辨認二者的區(qū)別，前者是一直存在本地的，后者只是伴隨著session，窗口一旦關(guān)閉就沒了。二者用法完全相同。

2.?Jquery.storage.js插件

? ? 項目主頁，api請參考http://ek.alphaschildren.org/projects/storagejs/

? ? 對于舊版不支持html5的瀏覽器可以引入jquery.cookie.js插件，就可以用cookie來實現(xiàn)存儲，同時storage的api不變，這樣應(yīng)用代碼接口調(diào)用就獨立于存儲。

? ? 將相關(guān)兩個js綁定到basetag的jquery里，因此每個使用到j(luò)query的頁面都可以使用storage的api來完成本地信息存儲。

? ? 于此同時，修改了plug-in/tools/sysUtil.js和datagrid標簽，使得datagrid在表頭右鍵菜單中定義列之后能存儲記錄，并且在下次打開后能自動恢復(fù)。

? ? 在項目中使用方法：

? ? 對于有datagrid標簽的頁面可以直接使用名為storage的js變量來完成存儲工作，例如：

<script> storage.set( 'somekey', '{name:”json string”}'); var a = storage.get('somekey'); alert(a.name); //注意set方法放置json string，在取出時會自動轉(zhuǎn)為json對象，無須自行轉(zhuǎn)換 </script> 其他頁面單獨這樣操作（前提是BaseTag引入jquery）： <script> storage=$.localStorage; //優(yōu)先使用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?實現(xiàn)

? ? 根據(jù)jeecg的使用版本我進行了裁剪和降級，使得組件可以運行于1.3.2版本的easyui，主要是注釋掉1.3.4之后加入的tip插件。

? ? 該插件可以通過basetag引入，能夠?qū)ΜF(xiàn)有的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)); } }],">

總結(jié)

以上是生活随笔為你收集整理的【JEECG技术博文】Local storage easyui extensions的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。