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保存的数据,有效期很长,只要在本机电脑的浏览器使用过一次,就可以一直保存住该变量值,类似保存在本地的文本一样的感觉。