Bootstrap Table - resizable
Fix for https://github.com/wenzhixin/bootstrap-table/issues/1944, where resizable with data-height not allowing TH drag handle
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/wenzhixin/colResizable/master/source/colResizable-1.5.source.js"></script>
<table id="table"
data-show-columns="true"
data-search="true"
data-show-toggle="true"
data-pagination="true"
data-resizable="true"
data-height="500"
>
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="false">Item Name</th>
<th data-field="price" data-sortable="false">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item Name 1</td>
<td>1000 USD</td>
</tr>
<tr>
<td>2</td>
<td>Item Name 2</td>
<td>1000 USD</td>
</tr>
<tr>
<td>3</td>
<td>Item Name 3</td>
<td>1000 USD</td>
</tr>
<tr>
<td>4</td>
<td>Item Name 4</td>
<td>1000 USD</td>
</tr>
<tr>
<td>5</td>
<td>Item Name 5</td>
<td>1000 USD</td>
</tr>
</tbody>
</table>
JavaScript
// Bootstap table, with resizable extension. Made to show and hopefully fix issue where TH column drag handle not supported when data-height is set. See https://github.com/wenzhixin/bootstrap-table/issues/1944
$(function () {
$('#table').bootstrapTable({
});
});
/**
* @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
});
};
$.extend($.fn.bootstrapTable.defaults, {
resizable: true,
liveDrag: false,
fixed: true,
headerOnly: true,
minWidth: 15,
hoverCursor: 'e-resize',
dragCursor: 'e-resize',
onResizableResize: function (e) {
return true;
},
onResizableDrag: function (e) {
return true;
}
});
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,...