Surinder Kumar
Ashesh Vashi
parent
486da5e12c
commit
278f18bab8
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
backgrid-sizeable-columns
|
||||
https://github.com/WRidder/backgrid-sizeable-columns
|
||||
|
||||
Copyright (c) 2014 Wilbert van de Ridder
|
||||
Licensed under the MIT @license.
|
||||
*/
|
||||
table.backgrid {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backgrid .resizeHandler {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
margin-left: -8px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.backgrid .resizeHandler.grid-draggable {
|
||||
opacity: 1;
|
||||
width: 1px;
|
||||
margin-left: 0px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.backgrid .resizeHandler .grid-draggable-cursor {
|
||||
cursor: col-resize;
|
||||
width: 100px;
|
||||
margin-left: -50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
/*
|
||||
backgrid-sizeable-columns
|
||||
https://github.com/FortesSolutions/backgrid-sizeable-columns
|
||||
|
||||
Copyright (c) 2016 Fortes Solutions
|
||||
Licensed under the MIT @license.
|
||||
*/
|
||||
(function (root, factory) {
|
||||
// CommonJS
|
||||
if (typeof exports == "object") {
|
||||
module.exports = factory(require("underscore"), require("backgrid"));
|
||||
}
|
||||
// AMD. Register as an anonymous module.
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define(['underscore', 'backgrid'], factory);
|
||||
}
|
||||
// Browser
|
||||
else {
|
||||
factory(root._, root.Backgrid);
|
||||
}
|
||||
|
||||
}(this, function (_, Backgrid) {
|
||||
"use strict";
|
||||
|
||||
// Adds width support to columns
|
||||
Backgrid.Extension.SizeAbleColumns = Backbone.View.extend({
|
||||
/** @property */
|
||||
tagName: "colgroup",
|
||||
|
||||
/**
|
||||
* Initializer
|
||||
* @param options
|
||||
*/
|
||||
initialize: function (options) {
|
||||
this.grid = options.grid;
|
||||
|
||||
// Attach event listeners once on render
|
||||
this.listenTo(this.grid.header, "backgrid:header:rendered", this.render);
|
||||
this.listenTo(this.grid.columns, "width:auto", this.setWidthAuto);
|
||||
this.listenTo(this.grid.columns, "width:fixed", this.setWidthFixed);
|
||||
this.listenTo(this.grid, "backgrid:refresh", this.setColToActualWidth);
|
||||
this.listenTo(this.grid.collection, "add remove reset", this.setColToActualWidth);
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds sizeable columns using <col> elements in a <colgroup>
|
||||
* @returns {Backgrid.Extension.SizeAbleColumns}
|
||||
*/
|
||||
render: function () {
|
||||
var view = this;
|
||||
view.$el.empty();
|
||||
|
||||
view.grid.columns.each(function (col) {
|
||||
if (typeof col.get("renderable") == "undefined" || col.get("renderable")) {
|
||||
var $colEl = $("<col>").appendTo(view.$el).attr("data-column-cid", col.cid);
|
||||
var colWidth = col.get("width");
|
||||
var colMinWidth = col.get("minWidth");
|
||||
var colMaxWidth = col.get("maxWidth");
|
||||
if (colWidth && colWidth != "*") {
|
||||
if (colMinWidth && colWidth < colMinWidth) {
|
||||
colWidth = colMinWidth;
|
||||
}
|
||||
if (colMaxWidth && colWidth > colMaxWidth) {
|
||||
colWidth = colMaxWidth;
|
||||
}
|
||||
$colEl.width(colWidth);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add data attribute to column cells
|
||||
if (view.grid.header.headerRows) {
|
||||
_.each(view.grid.header.headerRows, function(row) {
|
||||
_.each(row.cells, function(cell) {
|
||||
cell.$el.attr("data-column-cid", cell.column.cid);
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
_.each(view.grid.header.row.cells, function(cell) {
|
||||
cell.$el.attr("data-column-cid", cell.column.cid);
|
||||
});
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
view.grid.collection.trigger("backgrid:colgroup:changed");
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets a <col> element belonging to given model
|
||||
* @param colModel Backgrid.Column
|
||||
* @returns {*|JQuery|any|jQuery}
|
||||
* @private
|
||||
*/
|
||||
getColumnElement: function (colModel) {
|
||||
return this.$el.find('col[data-column-cid="' + colModel.cid + '"]');
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the column width of given model
|
||||
* @param colModel Backgrid.Column
|
||||
* @returns {Integer}
|
||||
* @private
|
||||
*/
|
||||
getHeaderElementWidth: function(colModel) {
|
||||
return this.grid.header.$el.find("th[data-column-cid='" + colModel.cid + "']").outerWidth();
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a width of the given column to "*" (auto)
|
||||
* @param colModel Backgrid.Column
|
||||
* @private
|
||||
*/
|
||||
setWidthAuto: function (colModel) {
|
||||
// Get column element
|
||||
var $colElement = this.getColumnElement(colModel);
|
||||
|
||||
// Save width
|
||||
colModel.set("width", "*");
|
||||
|
||||
// Set column width to auto
|
||||
$colElement.css("width", "");
|
||||
|
||||
this.grid.collection.trigger("backgrid:colgroup:updated");
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a width of the given column to a fixed width defined in the model.
|
||||
* @param colModel Backgrid.Column
|
||||
* @private
|
||||
*/
|
||||
setWidthFixed: function (colModel) {
|
||||
// Get column element
|
||||
var $colElement = this.getColumnElement(colModel);
|
||||
|
||||
// Get width of header element
|
||||
var width = this.getHeaderElementWidth(colModel);
|
||||
|
||||
// Set column width to the original width
|
||||
$colElement.css("width", width);
|
||||
|
||||
// Save width
|
||||
colModel.set("width", width);
|
||||
|
||||
this.grid.collection.trigger("backgrid:colgroup:updated");
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the view's <col> elements to current width
|
||||
* @private
|
||||
*/
|
||||
setColToActualWidth: function() {
|
||||
var view = this;
|
||||
var changed = false;
|
||||
_.each(view.grid.header.row.cells, function(cell) {
|
||||
var $colEl = view.getColumnElement(cell.column);
|
||||
if (cell.column.get("width") !== "*") {
|
||||
changed = changed || $colEl.width() == cell.$el.outerWidth();
|
||||
$colEl.width(cell.$el.outerWidth());
|
||||
}
|
||||
});
|
||||
|
||||
if (changed) {
|
||||
view.grid.collection.trigger("backgrid:colgroup:updated");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Makes column resizable; requires Backgrid.Extension.sizeAbleColumns
|
||||
Backgrid.Extension.SizeAbleColumnsHandlers = Backbone.View.extend({
|
||||
minWidthDynamicColumns: 80,
|
||||
|
||||
/**
|
||||
* Initializer
|
||||
* @param options
|
||||
*/
|
||||
initialize: function (options) {
|
||||
this.sizeAbleColumns = options.sizeAbleColumns;
|
||||
this.grid = this.sizeAbleColumns.grid;
|
||||
this.columns = this.grid.columns;
|
||||
this.header = this.grid.header;
|
||||
|
||||
this.saveColumnWidth = options.saveColumnWidth;
|
||||
if (options.minWidthDynamicColumns != null) {
|
||||
this.minWidthDynamicColumns = options.minWidthDynamicColumns;
|
||||
}
|
||||
|
||||
this.setHeaderElements();
|
||||
this.attachEvents();
|
||||
|
||||
this.checkSpacerColumn();
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds handlers to resize the columns
|
||||
* @returns {Backgrid.Extension.SizeAbleColumnsHandlers}
|
||||
*/
|
||||
render: function () {
|
||||
var view = this;
|
||||
view.$el.empty();
|
||||
|
||||
// For now, loop tds in first row
|
||||
_.each(view.headerElements, function (columnEl, index) {
|
||||
// Get matching col element
|
||||
var $column = $(columnEl);
|
||||
var columnModelCid = $column.data("column-cid");
|
||||
var $col = view.sizeAbleColumns.$el.find("col[data-column-cid=" + columnModelCid + "]");
|
||||
var columnModel = view.columns.get({ cid: columnModelCid});
|
||||
|
||||
if (columnModel && columnModel.get("resizeable")) {
|
||||
// Create helper elements
|
||||
var $resizeHandler = $("<div></div>")
|
||||
.addClass("resizeHandler")
|
||||
.attr("data-column-index", index)
|
||||
.appendTo(view.$el);
|
||||
var $resizeHandlerHelper = $("<div></div>")
|
||||
.hide()
|
||||
.addClass("grid-draggable-cursor")
|
||||
.appendTo($resizeHandler);
|
||||
|
||||
// Make draggable
|
||||
$resizeHandler.on("mousedown", function (e) {
|
||||
view._stopEvent(e);
|
||||
var startX = Math.round($resizeHandler.offset().left);
|
||||
var $doc = $(document);
|
||||
var handlerNonDragSize = $resizeHandler.outerWidth();
|
||||
|
||||
// Set class
|
||||
$resizeHandler.addClass("grid-draggable");
|
||||
$resizeHandlerHelper.show();
|
||||
|
||||
// Follow the mouse
|
||||
var mouseMoveHandler = function (evt) {
|
||||
view._stopEvent(evt);
|
||||
|
||||
// Check for constraints
|
||||
var minWidth = columnModel.get("minWidth");
|
||||
if (!minWidth || minWidth < 20) {
|
||||
minWidth = 20;
|
||||
}
|
||||
var maxWidth = columnModel.get("maxWidth");
|
||||
var newLeftPos = evt.pageX;
|
||||
var currentWidth = columnModel.get("width");
|
||||
var newWidth = currentWidth + (newLeftPos - startX) - handlerNonDragSize / 2;
|
||||
|
||||
if (minWidth && newWidth <= minWidth) {
|
||||
newLeftPos = startX - (currentWidth - minWidth) + handlerNonDragSize / 2;
|
||||
}
|
||||
if (maxWidth && newWidth >= maxWidth) {
|
||||
newLeftPos = startX + maxWidth - currentWidth + handlerNonDragSize / 2;
|
||||
}
|
||||
|
||||
// Apply mouse change to handler
|
||||
$resizeHandler.offset({
|
||||
left: newLeftPos
|
||||
});
|
||||
};
|
||||
$doc.on("mousemove", mouseMoveHandler);
|
||||
|
||||
// Add handler to listen for mouseup
|
||||
var mouseUpHandler = function (evt) {
|
||||
// Cleanup
|
||||
view._stopEvent(evt);
|
||||
$resizeHandler.removeClass("grid-draggable");
|
||||
$resizeHandlerHelper.hide();
|
||||
$doc.off("mouseup", mouseUpHandler);
|
||||
$doc.off("mousemove", mouseMoveHandler);
|
||||
|
||||
// Adjust column size
|
||||
var stopX = Math.round($resizeHandler.offset().left);
|
||||
var offset = (startX - stopX);
|
||||
var oldWidth = $column.outerWidth();
|
||||
var newWidth = oldWidth - offset;
|
||||
|
||||
// Save width and trigger events
|
||||
if (newWidth != oldWidth) {
|
||||
view._disableAutoWithColumns();
|
||||
$col.width(newWidth);
|
||||
|
||||
if (view.saveColumnWidth) {
|
||||
// Save updated width
|
||||
columnModel.set("width", newWidth, {silent: true});
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
columnModel.trigger("resize", columnModel, newWidth, oldWidth, offset);
|
||||
}
|
||||
view.updateHandlerPosition();
|
||||
};
|
||||
$doc.on("mouseup", mouseUpHandler);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Position drag handlers
|
||||
view.updateHandlerPosition();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable automatic width for all columns and set the current width as the new width
|
||||
* @returns {undefined}
|
||||
*/
|
||||
_disableAutoWithColumns: function () {
|
||||
// Check if we have an autosize column, if so, trigger resize on it as well
|
||||
var autoWidthColumns = this.columns.filter(function (column) {
|
||||
return column.get('width') == '*' && column.get('name') != '__spacerColumn';
|
||||
});
|
||||
|
||||
for (var i = 0; i < autoWidthColumns.length; i++) {
|
||||
var autoWidthColumn = autoWidthColumns[i];
|
||||
|
||||
// find the corresponding header element to determine width and cid from
|
||||
var $headerElement;
|
||||
for (var j = 0; j < this.headerElements.length; j++) {
|
||||
$headerElement = $(this.headerElements[j]);
|
||||
if ($headerElement.hasClass(autoWidthColumn.get('name'))) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var outerWidth = $headerElement.outerWidth();
|
||||
var columnModelCid = $headerElement.data("column-cid");
|
||||
this.sizeAbleColumns.$el.find("col[data-column-cid=" + columnModelCid + "]").width(outerWidth);
|
||||
|
||||
var column = this.columns.get({ cid: columnModelCid});
|
||||
if (this.saveColumnWidth) {
|
||||
column.set('width', outerWidth, {silent: true});
|
||||
}
|
||||
column.trigger('resize', column, outerWidth);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Helper function to prevent event propagation
|
||||
* @param e {Event}
|
||||
* @private
|
||||
*/
|
||||
_stopEvent: function (e) {
|
||||
if (e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.cancelBubble = true;
|
||||
e.returnValue = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Add listeners
|
||||
* @private
|
||||
*/
|
||||
attachEvents: function () {
|
||||
var view = this;
|
||||
view.listenTo(view.columns, "change:resizeable", view.render);
|
||||
view.listenTo(view.columns, "resize width:auto width:fixed add remove", view.checkSpacerColumn);
|
||||
view.listenTo(view.grid.collection, "backgrid:colgroup:updated", view.updateHandlerPosition);
|
||||
view.listenTo(view.grid.collection, "backgrid:colgroup:changed", function () {
|
||||
// Wait for callstack to be cleared
|
||||
_.defer(function () {
|
||||
view.setHeaderElements();
|
||||
view.render();
|
||||
});
|
||||
});
|
||||
|
||||
this.resizeEvtHandler = _.debounce(_.bind(view.updateHandlerPosition, view), 250);
|
||||
$(window).on("resize", this.resizeEvtHandler);
|
||||
},
|
||||
|
||||
/**
|
||||
* Checks whether a spacer column is nessecary. This is the case when widths are set on all columns and it's smaller
|
||||
* that the grid element width.
|
||||
* @private
|
||||
*/
|
||||
checkSpacerColumn: function () {
|
||||
var view = this;
|
||||
var spacerColumn = _.first(view.columns.where({name: "__spacerColumn"}));
|
||||
var autoColumns = view.columns.filter(function (col) {
|
||||
return col.get("width") == "*" && col.get("name") != "__spacerColumn";
|
||||
});
|
||||
|
||||
// Check if there is a column with auto width, if so, no need to do anything
|
||||
if (_.isEmpty(autoColumns)) {
|
||||
var totalWidth = view.columns.reduce(function (memo, num) {
|
||||
// count 0 pixels for the spacer column
|
||||
var colWidth = (num.get("width") == "*") ? 0 : num.get("width");
|
||||
return memo + colWidth;
|
||||
}, 0);
|
||||
var gridWidth = view.grid.$el.width();
|
||||
|
||||
if (gridWidth > totalWidth) {
|
||||
// The grid is larger than the cumulative column width, we need a spacer column
|
||||
if (!spacerColumn) {
|
||||
// Create new column model
|
||||
view.columns.add(view.getSpacerColumn(), {silent: true});
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (spacerColumn) {
|
||||
view.columns.remove(spacerColumn, {silent: true});
|
||||
}
|
||||
|
||||
var columnsWidth = this.columns.reduce(function (memo, column) {
|
||||
return memo + (column.get('width') == '*' ? this.minWidthDynamicColumns : column.get('width'));
|
||||
}, 0, this);
|
||||
// min width on columns does not work, therefore place the min width on the table itself
|
||||
this.grid.$el.css('min-width', columnsWidth + 'px');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a spacer column definition
|
||||
* @returns Object
|
||||
* @private
|
||||
*/
|
||||
getSpacerColumn: function() {
|
||||
return Backgrid.Extension.SizeAbleColumns.spacerColumnDefinition;
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the position of the handlers
|
||||
* @private
|
||||
*/
|
||||
updateHandlerPosition: function () {
|
||||
var view = this;
|
||||
_.each(view.headerElements, function (columnEl, index) {
|
||||
var $column = $(columnEl);
|
||||
|
||||
// Get handler for current column and update position
|
||||
view.$el.children().filter("[data-column-index='" + index + "']")
|
||||
.css("left", $column.position().left + $column.outerWidth());
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Find the current header elements and stores them
|
||||
*/
|
||||
setHeaderElements: function () {
|
||||
var self = this;
|
||||
var rows = self.grid.header.headerRows || [self.grid.header.row];
|
||||
self.headerCells = [];
|
||||
|
||||
// Loop all rows
|
||||
_.each(rows, function (row) {
|
||||
// Loop cells of row
|
||||
_.each(row.cells, function (cell) {
|
||||
var columnModel = self.columns.get({cid: cell.column.cid});
|
||||
if (!_.isEmpty(columnModel)) {
|
||||
self.headerCells.push({
|
||||
$el: cell.$el,
|
||||
el: cell.el,
|
||||
column: columnModel
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sort cells
|
||||
var headerCells = _.sortBy(self.headerCells, function (cell) {
|
||||
return self.columns.indexOf(cell.column);
|
||||
});
|
||||
|
||||
// Filter cells
|
||||
self.headerCells = _.filter(headerCells, function(cell) {
|
||||
return cell.column.get("renderable") === true ||
|
||||
typeof cell.column.get("renderable") === "undefined";
|
||||
});
|
||||
|
||||
self.headerElements = _.map(self.headerCells, function (cell) {
|
||||
return cell.el;
|
||||
});
|
||||
},
|
||||
|
||||
remove: function() {
|
||||
$(window).off("resize", this.resizeEvtHandler);
|
||||
Backbone.View.prototype.remove.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Sample definition for the spacer column
|
||||
*/
|
||||
Backgrid.Extension.SizeAbleColumns.spacerColumnDefinition = {
|
||||
name: "__spacerColumn",
|
||||
label: "",
|
||||
editable: false,
|
||||
cell: Backgrid.StringCell,
|
||||
width: "*",
|
||||
nesting: [],
|
||||
resizeable: false,
|
||||
sortable: false,
|
||||
orderable: false,
|
||||
displayOrder: 9999
|
||||
};
|
||||
return Backgrid;
|
||||
}));
|
||||
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/backgrid/backgrid-select-all.css' if config.DEBUG else 'css/backgrid/backgrid-select-all.min.css')}}"/>
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/backgrid/backgrid-paginator.css' if config.DEBUG else 'css/backgrid/backgrid-paginator.min.css')}}"/>
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/backgrid/backgrid-filter.css' if config.DEBUG else 'css/backgrid/backgrid-filter.min.css')}}"/>
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/backgrid/backgrid-sizeable-columns.css')}}"/>
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/select2/select2.css' if config.DEBUG else 'css/select2/select2.min.css')}}"/>
|
||||
|
||||
<!-- View specified stylesheets -->
|
||||
|
|
@ -73,6 +74,9 @@
|
|||
"backgrid.filter": {
|
||||
"deps": ['backgrid']
|
||||
},
|
||||
"backgrid.sizeable.columns": {
|
||||
"deps": ['backgrid']
|
||||
},
|
||||
"bootstrap.switch": {
|
||||
"deps": ['jquery', 'bootstrap'],
|
||||
"exports": 'jQuery.fn.bootstrapSwitch'
|
||||
|
|
@ -122,6 +126,7 @@
|
|||
"backgrid.select.all": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-select-all' if config.DEBUG else 'backgrid-select-all.min')) }}",
|
||||
"backgrid.paginator": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-paginator' if config.DEBUG else 'backgrid-paginator.min')) }}",
|
||||
"backgrid.filter": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-filter' if config.DEBUG else 'backgrid-filter.min')) }}",
|
||||
"backgrid.sizeable.columns": "{{ url_for('static', filename='js/backgrid/backgrid-sizeable-columns') }}",
|
||||
"backbone.undo": "{{ url_for('static', filename='js/' + ('backbone.undo' if config.DEBUG else 'backbone.undo.min')) }}",
|
||||
"pgadmin.backgrid": "{{ url_for('static', filename='js/backgrid/backgrid.pgadmin') }}",
|
||||
'pgadmin.backform': "{{ url_for('static', filename='js/backform.pgadmin') }}",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ define(
|
|||
'codemirror/addon/fold/foldgutter', 'codemirror/addon/fold/foldcode',
|
||||
'codemirror/addon/hint/show-hint', 'codemirror/addon/hint/sql-hint',
|
||||
'codemirror/addon/fold/pgadmin-sqlfoldcode', 'backgrid.paginator',
|
||||
'wcdocker', 'pgadmin.file_manager'
|
||||
'backgrid.sizeable.columns', 'wcdocker', 'pgadmin.file_manager'
|
||||
],
|
||||
function(
|
||||
$, _, S, alertify, pgAdmin, Backbone, Backgrid, CodeMirror, pgExplain
|
||||
|
|
@ -427,8 +427,12 @@ define(
|
|||
filter_array.push(c.name);
|
||||
});
|
||||
|
||||
// Create Collection of Backgrid columns
|
||||
var columnsColl = new Backgrid.Columns(columns);
|
||||
var $data_grid = self.$el.find('#datagrid');
|
||||
|
||||
var grid = self.grid = new Backgrid.Grid({
|
||||
columns: columns,
|
||||
columns: columnsColl,
|
||||
collection: collection,
|
||||
className: "backgrid table-bordered",
|
||||
row: SqlEditorCustomRow
|
||||
|
|
@ -447,7 +451,7 @@ define(
|
|||
});
|
||||
|
||||
// Render the grid
|
||||
self.$el.find('#datagrid').append(self.grid.render().$el);
|
||||
$data_grid.append(self.grid.render().$el);
|
||||
|
||||
// Render the paginator
|
||||
self.$el.find('#datagrid-paginator').append(paginator.render().el);
|
||||
|
|
@ -455,6 +459,51 @@ define(
|
|||
// Render the client side filter
|
||||
self.$el.find('.pg-prop-btn-group').append(clientSideFilter.render().el);
|
||||
|
||||
var sizeAbleCol = new Backgrid.Extension.SizeAbleColumns({
|
||||
collection: collection,
|
||||
columns: columnsColl,
|
||||
grid: self.grid
|
||||
});
|
||||
|
||||
$data_grid.find('thead').before(sizeAbleCol.render().el);
|
||||
|
||||
// Add resize handlers
|
||||
var sizeHandler = new Backgrid.Extension.SizeAbleColumnsHandlers({
|
||||
sizeAbleColumns: sizeAbleCol,
|
||||
grid: self.grid,
|
||||
saveColumnWidth: true
|
||||
});
|
||||
|
||||
// sizeHandler should render only when table grid loaded completely.
|
||||
setTimeout(function() {
|
||||
$data_grid.find('thead').before(sizeHandler.render().el);
|
||||
}, 1000);
|
||||
|
||||
// Initialized table width 0 still not calculated
|
||||
var table_width = 0;
|
||||
// Listen to resize events
|
||||
columnsColl.on('resize',
|
||||
function(columnModel, newWidth, oldWidth, offset) {
|
||||
var $grid_el = $data_grid.find('table'),
|
||||
tbl_orig_width = $grid_el.width(),
|
||||
offset = oldWidth - newWidth,
|
||||
tbl_new_width = tbl_orig_width - offset;
|
||||
|
||||
if (table_width == 0) {
|
||||
table_width = tbl_orig_width
|
||||
}
|
||||
// Table new width cannot be less than original width
|
||||
if (tbl_new_width >= table_width) {
|
||||
$($grid_el).css('width', tbl_new_width + 'px');
|
||||
}
|
||||
else {
|
||||
// reset if calculated tbl_new_width is less than original
|
||||
// table width
|
||||
tbl_new_width = table_width;
|
||||
$($grid_el).css('width', tbl_new_width + 'px');
|
||||
}
|
||||
});
|
||||
|
||||
// Forcefully sorting by the first column.
|
||||
if (columns.length > 1) {
|
||||
collection.setSorting(columns[1].name);
|
||||
|
|
@ -520,37 +569,97 @@ define(
|
|||
name: "start_time",
|
||||
label: "Date",
|
||||
cell: "string",
|
||||
editable: false
|
||||
editable: false,
|
||||
resizeable: true
|
||||
}, {
|
||||
name: "query",
|
||||
label: "Query",
|
||||
cell: "string",
|
||||
editable: false
|
||||
editable: false,
|
||||
resizeable: true
|
||||
}, {
|
||||
name: "row_affected",
|
||||
label: "Rows affected",
|
||||
cell: "integer",
|
||||
editable: false
|
||||
editable: false,
|
||||
resizeable: true
|
||||
}, {
|
||||
name: "total_time",
|
||||
label: "Total Time",
|
||||
cell: "string",
|
||||
editable: false
|
||||
editable: false,
|
||||
resizeable: true
|
||||
}, {
|
||||
name: "message",
|
||||
label: "Message",
|
||||
cell: "string",
|
||||
editable: false
|
||||
editable: false,
|
||||
resizeable: true
|
||||
}];
|
||||
|
||||
|
||||
// Create Collection of Backgrid columns
|
||||
var columnsColl = new Backgrid.Columns(columns);
|
||||
var $history_grid = self.$el.find('#history_grid');
|
||||
|
||||
var grid = self.history_grid = new Backgrid.Grid({
|
||||
columns: columns,
|
||||
columns: columnsColl,
|
||||
collection: history_collection,
|
||||
className: "backgrid table-bordered"
|
||||
});
|
||||
|
||||
// Render the grid
|
||||
self.$el.find('#history_grid').append(self.history_grid.render().$el);
|
||||
$history_grid.append(grid.render().$el);
|
||||
|
||||
var sizeAbleCol = new Backgrid.Extension.SizeAbleColumns({
|
||||
collection: history_collection,
|
||||
columns: columnsColl,
|
||||
grid: self.history_grid
|
||||
});
|
||||
|
||||
$history_grid.find('thead').before(sizeAbleCol.render().el);
|
||||
|
||||
// Add resize handlers
|
||||
var sizeHandler = new Backgrid.Extension.SizeAbleColumnsHandlers({
|
||||
sizeAbleColumns: sizeAbleCol,
|
||||
grid: self.history_grid,
|
||||
saveColumnWidth: true
|
||||
});
|
||||
|
||||
// sizeHandler should render only when table grid loaded completely.
|
||||
setTimeout(function() {
|
||||
$history_grid.find('thead').before(sizeHandler.render().el);
|
||||
}, 1000);
|
||||
|
||||
// re render sizeHandler whenever history panel tab becomes visible
|
||||
self.history_panel.on(wcDocker.EVENT.VISIBILITY_CHANGED, function(ev) {
|
||||
$history_grid.find('thead').before(sizeHandler.render().el);
|
||||
});
|
||||
|
||||
// Initialized table width 0 still not calculated
|
||||
var table_width = 0;
|
||||
// Listen to resize events
|
||||
columnsColl.on('resize',
|
||||
function(columnModel, newWidth, oldWidth, offset) {
|
||||
var $grid_el = $history_grid.find('table'),
|
||||
tbl_orig_width = $grid_el.width(),
|
||||
offset = oldWidth - newWidth,
|
||||
tbl_new_width = tbl_orig_width - offset;
|
||||
|
||||
if (table_width == 0) {
|
||||
table_width = tbl_orig_width
|
||||
}
|
||||
// Table new width cannot be less than original width
|
||||
if (tbl_new_width >= table_width) {
|
||||
$($grid_el).css('width', tbl_new_width + 'px');
|
||||
}
|
||||
else {
|
||||
// reset if calculated tbl_new_width is less than original
|
||||
// table width
|
||||
tbl_new_width = table_width;
|
||||
$($grid_el).css('width', tbl_new_width + 'px');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Callback function for Add New Row button click.
|
||||
|
|
@ -1358,20 +1467,34 @@ define(
|
|||
});
|
||||
}
|
||||
|
||||
// Create column label.
|
||||
// To show column label and data type in multiline,
|
||||
// The elements should be put inside the div.
|
||||
// Create column label and type.
|
||||
var column_label = document.createElement('div'),
|
||||
label_text = document.createElement('div'),
|
||||
column_type = document.createElement('span'),
|
||||
col_label = '',
|
||||
col_type = '';
|
||||
label_text.innerText = c.name;
|
||||
|
||||
var type = pg_types[c.type_code][0];
|
||||
var col_label = c.name;
|
||||
if (!is_primary_key)
|
||||
col_label += ' ' + type;
|
||||
col_type += ' ' + type;
|
||||
else
|
||||
col_label += ' [PK] ' + type;
|
||||
col_type += ' [PK] ' + type;
|
||||
|
||||
if (c.precision == null) {
|
||||
if (c.internal_size > 0)
|
||||
col_label += '(' + c.internal_size + ')';
|
||||
col_type += ' (' + c.internal_size + ')';
|
||||
}
|
||||
else
|
||||
col_label += '(' + c.precision + ',' + c.scale + ')';
|
||||
col_type += ' (' + c.precision + ',' + c.scale + ')';
|
||||
|
||||
column_type.innerText = col_type;
|
||||
|
||||
// Set values of column label and its type
|
||||
column_label.appendChild(label_text);
|
||||
column_label.appendChild(column_type);
|
||||
|
||||
// Identify cell type of column.
|
||||
switch(type) {
|
||||
|
|
@ -1394,12 +1517,33 @@ define(
|
|||
|
||||
var col = {
|
||||
name : c.name,
|
||||
label: col_label,
|
||||
label: column_label.innerHTML,
|
||||
cell: col_cell,
|
||||
can_edit: self.can_edit,
|
||||
editable: self.is_editable
|
||||
};
|
||||
editable: self.is_editable,
|
||||
resizeable: true,
|
||||
headerCell: Backgrid.HeaderCell.extend({
|
||||
render: function () {
|
||||
// Add support for HTML element in column title
|
||||
this.$el.empty();
|
||||
var column = this.column,
|
||||
sortable = Backgrid.callByNeed(column.sortable(), column, this.collection),
|
||||
label;
|
||||
if(sortable){
|
||||
label = $("<a>").append(column.get("label")).append("<b class='sort-caret'></b>");
|
||||
} else {
|
||||
var header_column = document.createElement('div');
|
||||
label = header_column.appendChild(column.get("label"));
|
||||
}
|
||||
|
||||
this.$el.append(label);
|
||||
this.$el.addClass(column.get("name"));
|
||||
this.$el.addClass(column.get("direction"));
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
}
|
||||
})
|
||||
};
|
||||
columns.push(col);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue