bootgrid 刷新保持当前排序

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