jquery bootstraptable_bootstrap table 列拖动，你可以做到像excel一样，

今天给大家推荐一个实用的功能，bootrap table表格像excel一样可以拖动变化列宽。

$("#exampleTable").colResizable({

liveDrag: true,//实时显示滑动位置

gripInnerHtml: ",

//draggingClass: "dragging",

postbackSafe: true,//刷新后保留之前的拖拽宽度

headerOnly:true,

resizeMode:"overflow",

//onResize: onSampleResized

});

调用此方法之前需要引入

代码  bootstrap-table-resizable.js

/**

* @author: Dennis Hernández

* @webSite: http://djhvscf.github.io/Blog

* @version: v1.0.0

*/

(function ($) {

'use strict';

var initResizable = function (that) {

//Deletes the plugin to re-create it

that.$el.colResizable({ disable: true});

//Creates the plugin

that.$el.colResizable({

liveDrag: that.options.liveDrag,

fixed: that.options.fixed,

headerOnly: that.options.headerOnly,

minWidth: that.options.minWidth,

hoverCursor: that.options.hoverCursor,

dragCursor: that.options.dragCursor,

onResize: that.onResize,

onDrag: that.options.onResizableDrag,

resizeMode: that.options.resizeMode

});

};

$.extend($.fn.bootstrapTable.defaults, {

resizable: false,

liveDrag: false,

fixed: true,

headerOnly: false,

minWidth: 15,

hoverCursor: 'e-resize',

dragCursor: 'e-resize',

onResizableResize: function (e) {

return false;

},

onResizableDrag: function (e) {

return false;

}

});

var BootstrapTable = $.fn.bootstrapTable.Constructor,

_toggleView = BootstrapTable.prototype.toggleView,

_resetView = BootstrapTable.prototype.resetView;

BootstrapTable.prototype.toggleView = function () {

_toggleView.apply(this, Array.prototype.slice.apply(arguments));

if (this.options.resizable && this.options.cardView) {

//Deletes the plugin

$(this.$el).colResizable({ disable: true});

}

};

BootstrapTable.prototype.resetView = function () {

var that = this;

_resetView.apply(this, Array.prototype.slice.apply(arguments));

if (this.options.resizable) {

// because in fitHeader function, we use setTimeout(func, 100);

setTimeout(function () {

initResizable(that);

}, 100);

}

};

BootstrapTable.prototype.onResize = function (e) {

var that = $(e.currentTarget);

that.bootstrapTable('resetView');

that.data('bootstrap.table').options.onResizableResize.apply(e);

}

})(jQuery);

代码 colResizable-1.6.js

/**

_ _____ _ _ _

| | __ \ (_) | | | |

___ ___ | | |__) |___ ___ _ ______ _| |__ | | ___

/ __/ _ \| | _ // _ \/ __| |_ / _` | '_ \| |/ _ \

| (_| (_) | | | \ \ __/\__ \ |/ / (_| | |_) | | __/

\___\___/|_|_| \_\___||___/_/___\__,_|_.__/|_|\___|

v1.7 - jQuery plugin created by Alvaro Prieto Lauroba

Licences: MIT & GPL

Feel free to use or modify this plugin as far as my full name is kept

*/

(function($){

//IE8 Polyfill

if(!Array.indexOf) { Array.prototype.indexOf = function(obj) { for(var i=0; i<this.length;i++){ if(this[i]==obj){ return i;}} return -1; }}

var d = $(document); //window object

var h = $("head"); //head object

var drag = null; //reference to the current grip that is being dragged

var tables = {}; //object of the already processed tables (table.id as key)

var count = 0; //internal count to create unique IDs when needed.

//common strings for packing

var ID = "id";

var PX = "px";

var SIGNATURE ="JColResizer";

var FLEX = "JCLRFlex";

//short-cuts

var I = parseInt;

var M = Math;

var ie = navigator.userAgent.indexOf('Trident/4.0')>0;

var S;

var pad = ""

try{ S = sessionStorage;}catch(e){} //Firefox crashes when executed as local file system

//append required CSS rules

h.append("");

/**

* Function to allow column resizing for table objects. It is the starting point to apply the plugin.

* @param {DOM node} tb - reference to the DOM table object to be enhanced

* @param {Object} options - some customization values

*/

var init = function( tb, options){

var t = $(tb); //the table object is wrapped

t.opt = options; //each table has its own options available at anytime

t.mode = options.resizeMode; //shortcuts

t.dc = t.opt.disabledColumns;

if(t.opt.removePadding) t.addClass("JPadding");

if(t.opt.disable) return destroy(t); //the user is asking to destroy a previously colResized table

var id = t.id = t.attr(ID) || SIGNATURE+count++; //its id is obtained, if null new one is generated

t.p = t.opt.postbackSafe; //short-cut to detect postback safe

if(!t.is("table") || tables[id] && !t.opt.partialRefresh) return; //if the object is not a table or if it was already processed