1. 前言
主要是利用了HTHNL5的localStorage技术和用ajax传输一个数组到后台并进行判断。这篇文章是解决一个小需求而来的,主要是用来记录。
2. 代码
JavaScript:
var g_sample_sortArr = []; var sample_sortKey,sample_sortVal; $("#grid-sample").on("initialize.rs.jquery.bootgrid", function (e) { if (typeof localStorage.sample_rowCount == 'string') { $("#grid-sample").bootgrid("setRowCount", localStorage.sample_rowCount); } if (typeof localStorage.sample_sortDict == 'string') { var sortObj = JSON.parse(localStorage.sample_sortDict); //global sample_sortKey = Object.keys(sortObj)[0]; sample_sortVal = sortObj[sample_sortKey]; g_sample_sortArr = []; g_sample_sortArr.push(sample_sortKey,sample_sortVal); console.log("lastItemSort[]="+sample_sortKey+":"+sample_sortVal); } }) function updateArrowDirection(){ //show arrow Direction when refresh PMS page var arrowDirection = (sample_sortVal == 'asc') ? 'icon glyphicon glyphicon-chevron-up' : 'icon glyphicon glyphicon-chevron-down'; $('[data-column-id="' + sample_sortKey + '"] span:last').attr('class',arrowDirection); } var grid_sample_data = $('#grid-sample').bootgrid({ ajax:true, rowCount:[10, 20, 30, 50], navigation: 3, post:function(){ return { type: 'getSampleInfo', "lastItemSort[]": g_sample_sortArr }; }, searchSettings: { delay: 200, characters: 3 }, url: "./sample", dataType: "json", rowSelect: false, formatters:{ } }).on("loaded.rs.jquery.bootgrid",function(){ localStorage.setItem("sample_rowCount", $("#grid-sample").bootgrid("getRowCount")); var curSortDict = $("#grid-sample").bootgrid("getSortDictionary"); if(Object.keys(curSortDict).length != 0){ localStorage.setItem("sample_sortDict", JSON.stringify(curSortDict)); } }); //show arrow Direction when refresh updateArrowDirection();
Java:
String id = request.getParameter("sort[id]"); String sender = request.getParameter("sort[sender]"); String received = request.getParameter("sort[received]"); String[] lastItemSort = request.getParameterValues("lastItemSort[]"); //example: string like ["id","asc"] if(lastItemSort != null) {//refresh current page or go to others page and return previous page switch(lastItemSort[0]) { case "id": //when id != null, it denotes one click id to sort and previous var id will get value. if(id == null) id = lastItemSort[1]; break; case "sender": if(sender == null) sender = lastItemSort[1]; break; case "received": if(received == null) received = lastItemSort[1]; break; default: System.out.println("This Type Can't Support for Sample Sort"); } }
3. 效果图
文字描述,就是之前点击排序后,刷新还能保持之前的排序和正确的箭头指向。
4. 总结
利用H5的localStorage技术可以bootgrid刷新保持当前排序,当然还可以保存当前显示的行数,其它需要保存的变量都可以用这个技术来保存,这个localStorage保存的数据,有效期很长,只要在本机电脑的浏览器使用过一次,就可以一直保存住该变量值,类似保存在本地的文本一样的感觉。