基于bootgrid,利用HTML5拖拽实现表格列互换并添加至localStorage

1.基于bootgrid,利用HTML5拖拽实现表格列互换,支持换页和刷新数据,首先找到用bootgrid加载表格数据的方法,

再写一个方法initTableData,其包括getList()和互换的初始化,如果有自定义字段的加载,该方法的调用必须在其后

function initTableData(){
	var d = new add_drag_th();
	d.init("grid","customer"); //这里的grid是table的id,customer:页面标识,用于存放localStorage
	getList(d);
}

function getList(d) {
	$("#grid").bootgrid({
         ......
    }).on("loaded.rs.jquery.bootgrid", function(){
		d.add_drag_event(initTableData);
	});
});

实现效果:

主要互换代码实现如下:

function add_drag_th(){
	var user = $(".nav-header .font-bold").text();
	var th_arr = new Array();
	var _this = this;
	var tableId = "";
	var p = "";//页面名称
	_this.init = function(table,page){
		tableId = table;
		p = page;
		_this.Storage.get();
		if(th_arr.length <= 0){
			_this.get_th();
		}
	};
	
	//获取th
	_this.get_th = function(){
		$("#"+tableId+" tr>th").each(function(){
			var j = {};
			j[$(this).attr("data-column-id")] = this.outerHTML;
			th_arr.push(j);
		});
		_this.set_th();
		localStorage.setItem(user+"_"+p, JSON.stringify(th_arr));
//		console.log("set:"+JSON.stringify(th_arr));
	};
	
	//重新加载th
	_this.set_th = function(){
		$("#"+tableId+" thead>tr").empty();
		for (var i = 0; i < th_arr.length; i++) {
			for ( var key in th_arr[i]) {
				$("#"+tableId+" thead>tr").append(th_arr[i][key]);
			}
		}
	};
	
	//添加拖拽事件
	_this.add_drag_event = function(callback){
		_this.Storage.bind();
		//允许放入  
        $("#"+tableId+" tr>th").on("dragover",function(e){  
            e.originalEvent.preventDefault();  
        });
        //拿起
        $("#"+tableId+" tr>th").on("dragstart",function(e){  
        	e.originalEvent.dataTransfer.setData("obj_add",e.currentTarget.dataset.columnId);  
        });
        //放下
        $("#"+tableId+" tr>th").on("drop",function(e){  
            e.originalEvent.preventDefault;  
            var id = e.originalEvent.dataTransfer.getData("obj_add");//拿起的th属性data-column-id
            var x = this.dataset.columnId;//放下的th属性data-column-id
            var d_i = 0;//拿起的th所在数组下标
            var u_i = 0;//放下的tn所在数组下标
            $(this).before($("th[data-column-id='"+id+"']"));
            for (var i = 0; i < th_arr.length; i++) {
    			for ( var key in th_arr[i]) {
    				if(key == id){d_i = i;}
    				if(key == x){u_i = i;}
    			}
    		}
            
            var th = th_arr[u_i];
    		th_arr[u_i] = th_arr[d_i];
    		th_arr[d_i] = th;
    		$("#"+tableId).bootgrid("destroy");
    		localStorage.setItem(user+"_"+p, JSON.stringify(th_arr));
    		callback();
        });
	};	
	_this.Storage = {
		bind:function(){
			if('localStorage' in window && window['localStorage'] !== null){					
				$(".dropdown-item input").on("click",function(){
					_this.Storage.put($(this).attr("name"),$(this).is(':checked'));
				})
			}else{
				console.log("浏览器不支持localStorage");
			}
		},
		put:function(name,isShow){
			for (var i = 0; i < th_arr.length; i++) {
				var b = false;
				for ( var key in th_arr[i]) {
					if(key == name){
						var _t = $(th_arr[i][key]);
						if(isShow){
							_t.attr("data-visible",true);
						}else{
							_t.attr("data-visible",false);
						}
						th_arr[i][key] = _t[0].outerHTML;
						localStorage.setItem(user+"_"+p, JSON.stringify(th_arr));
						b = true;
						break;
					}
				}
				if(b){break};
			}
		},
		get:function(){
			var l = localStorage.getItem(user+"_"+p);
			if(l != undefined && l != null){
				th_arr = JSON.parse(l);
				_this.set_th();
			}
		}
	};
}