1.?Local?storage背景

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

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

2.?Jquery.storage.js插件

? ? 項(xiàng)目主頁(yè)，api請(qǐng)參考http://ek.alphaschildren.org/projects/storagejs/

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

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

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

? ? 在項(xiàng)目中使用方法：

? ? 對(duì)于有datagrid標(biāo)簽的頁(yè)面可以直接使用名為storage的js變量來(lái)完成存儲(chǔ)工作，例如：

<script> storage.set( 'somekey', '{name:”json string”}'); var a = storage.get('somekey'); alert(a.name); //注意set方法放置json string，在取出時(shí)會(huì)自動(dòng)轉(zhuǎn)為json對(duì)象，無(wú)須自行轉(zhuǎn)換 </script> 其他頁(yè)面單獨(dú)這樣操作（前提是BaseTag引入jquery）： <script> storage=$.localStorage; //優(yōu)先使用localstorage if(!storage)storage=$.cookieStorage;//在不支持localstorage的瀏覽器下使用cookie存儲(chǔ) </script>
3.Easyui-extensions

? ? 請(qǐng)參考項(xiàng)目demo：http://jqext.sinaapp.com/

? ? jQuery?&&?jEasyUI?擴(kuò)展功能集合
? ? 該擴(kuò)展功能基于?jQuery?1.9.x/2.x?和?jQuery?EasyUI?1.3.6?實(shí)現(xiàn)

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

? ? 該插件可以通過(guò)basetag引入，能夠?qū)ΜF(xiàn)有的easyui組件功能和api加強(qiáng)和擴(kuò)展，在不改動(dòng)easyui?js的情況下擴(kuò)展對(duì)象組件的屬性。

4.Easyui?extensions使用示例

? ? 參考常用示例中查詢編輯器示例：

? ? 使用時(shí)只需在baseTag標(biāo)簽加一個(gè)屬性jeasyuiextensions，例如

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

? ? 將原Datagrid?表頭菜單去掉：

<script> //去掉sysUtil.js中定義的原默認(rèn)右鍵菜單 $.fn.datagrid.defaults.onHeaderContextMenu =null; $.fn.treegrid.defaults.onHeaderContextMenu =null; </script>

? ? 表頭菜單就會(huì)變成如下效果：

?

? ? 還可以通過(guò)datagrid標(biāo)簽的extendParams屬性增加自定義菜單，例如：

<t:datagrid name="jeecgDemoList2" title="高級(jí)查詢示例" ? 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('您點(diǎn)擊了{(lán)0}', field)); } }],">

總結(jié)

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

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