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();
}
}
};
}