TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DataGrid Toolbar links now work

This commit is contained in:
Sam Georges 2014-06-21 16:08:10 +10:00
parent 62c17e3196
commit 4351ddd505
7 changed files with 96 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
modules/backend/formwidgets/DataGrid.php
View File

@ -53,7 +53,7 @@ class DataGrid extends FormWidgetBase
$this->vars['columnHeaders'] = $this->getColumnHeaders();
$this->vars['columnDefinitions'] = $this->getColumnDefinitions();
$this->vars['columnWidths'] = $this->getColumnWidths();
$this->vars['minRows'] = $this->getMinRows();
$this->vars['size'] = $this->size;
$this->vars['toolbarWidget'] = $this->makeToolbarWidget();
}
@ -68,17 +68,6 @@ class DataGrid extends FormWidgetBase
return $toolbarWidget;
}
protected function getMinRows()
{
switch ($this->size) {
case 'tiny': return 2;
case 'small': return 4;
case 'large': return 6;
case 'huge': return 8;
case 'giant': return 10;
}
}
protected function getColumnHeaders()
{
$headers = [];

21
modules/backend/formwidgets/datagrid/assets/css/datagrid.css Normal file
View File

@ -0,0 +1,21 @@
.field-datagrid.size-tiny .control-datagrid {
min-height: 50px;
}
.field-datagrid.size-small .control-datagrid {
min-height: 100px;
}
.field-datagrid.size-large .control-datagrid {
min-height: 200px;
}
.field-datagrid.size-huge .control-datagrid {
min-height: 250px;
}
.field-datagrid.size-giant .control-datagrid {
min-height: 350px;
}
.field-datagrid .control-datagrid {
background: #eeeeee;
}
.field-datagrid .control-datagrid table thead th {
background-color: #fafafa;
}

46
modules/backend/formwidgets/datagrid/assets/js/datagrid.js
View File

@ -23,6 +23,7 @@
this.$el = $(element)
this.staticWidths = this.options.columnWidths
this.gridInstance = null
// Init
var handsontableOptions = {
@ -30,9 +31,11 @@
colWidths: function(columnIndex) {
return self.staticWidths[columnIndex]
},
height: 400,
columns: this.options.columns,
startRows: this.options.startRows,
minRows: this.options.minRows,
minSpareRows: 1,
// minSpareRows: 1,
currentRowClassName: 'currentRow',
// rowHeaders: true,
// manualColumnMove: true,
@ -42,15 +45,15 @@
removeRowPlugin: true
}
this.$el.handsontable(handsontableOptions)
this.gridInstance = this.$el.handsontable('getInstance')
this.staticWidths = this.calculateColumnWidths()
self.$el.handsontable('render')
self.gridInstance.render()
$(window).on('oc.updateUi', function(){
self.staticWidths = self.calculateColumnWidths()
self.$el.handsontable('render')
self.gridInstance.render()
})
$(window).on('resize', function(){
@ -59,10 +62,38 @@
}
DataGrid.DEFAULTS = {
minRows: null,
startRows: 1,
minRows: 1,
columnHeaders: null,
columnWidths: null,
columns: null
columns: null,
confirmMessage: 'Are you sure?'
}
DataGrid.prototype.getData = function() {
return this.$el.handsontable('getData')
}
DataGrid.prototype.insertRow = function(index) {
this.alterRow(index, 'insert_row')
}
DataGrid.prototype.removeRow = function(index) {
if (!confirm(this.options.confirmMessage))
return
this.alterRow(index, 'remove_row')
}
DataGrid.prototype.alterRow = function(index, command) {
if (!index) {
var selectedArr = this.gridInstance.getSelected()
if (selectedArr && selectedArr.length > 0)
index = selectedArr[0]
}
if (index === 0 || index)
this.gridInstance.alter(command, index)
}
DataGrid.prototype.calculateColumnWidths = function() {
@ -88,7 +119,7 @@
if (this > 0) {
staticWidths.push(this)
} else {
var remainingWidth = ((totalWidth - headerOffsetWidth - usedWidth) / unsetWidthCounts) - 2
var remainingWidth = ((totalWidth - headerOffsetWidth - usedWidth) / unsetWidthCounts) - 1
staticWidths.push(Math.max(remainingWidth, 100))
}
})
@ -175,7 +206,6 @@
}
}
Handsontable.PluginHooks.add('beforeInitWalkontable', function (walkontableConfig) {
var instance = this;

21
modules/backend/formwidgets/datagrid/assets/less/datagrid.less Normal file
View File

@ -0,0 +1,21 @@
@import "../../../../assets/less/core/boot.less";
@color-datagrid-body-bg: #eeeeee;
.field-datagrid {
&.size-tiny .control-datagrid { min-height: @size-tiny; }
&.size-small .control-datagrid { min-height: @size-small; }
&.size-large .control-datagrid { min-height: @size-large; }
&.size-huge .control-datagrid { min-height: @size-huge; }
&.size-giant .control-datagrid { min-height: @size-giant; }
.control-datagrid {
background: @color-datagrid-body-bg;
table thead th {
background-color: @color-body-bg;
}
}
}

2
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less vendored
View File

@ -224,7 +224,7 @@
cursor: pointer;
}
&.htRemoveRow {
&.htRemoveRow {
th.htRemoveRow {
text-align: center;
.btn {

19
modules/backend/formwidgets/datagrid/partials/_datagrid.htm
View File

@ -1,14 +1,19 @@
<?= $toolbarWidget->render() ?>
<div
id="<?= $this->getId() ?>"
style="width:100%"
data-control="datagrid"
data-min-rows="<?= $minRows ?>"></div>
class="field-datagrid size-<?= $size ?>">
<?= $toolbarWidget->render() ?>
<div
id="<?= $this->getId('grid') ?>"
style="width:100%"
data-control="datagrid"
class="control-datagrid"
></div>
</div>
<script>
$('#<?= $this->getId() ?>')
$('#<?= $this->getId('grid') ?>')
.data('columns', <?= json_encode($columnDefinitions) ?>)
.data('columnHeaders', <?= json_encode($columnHeaders) ?>)
.data('columnWidths', <?= json_encode($columnWidths) ?>)

4
modules/backend/formwidgets/datagrid/partials/_toolbar.htm
View File

@ -1,6 +1,6 @@
<div data-control="toolbar">
<a href="#" class="btn btn-sm btn-default oc-icon-plus-square">Insert Row</a>
<a href="#" class="btn btn-sm btn-default oc-icon-minus-square">Delete Row</a>
<a href="#" class="btn btn-sm btn-default oc-icon-plus-square" onclick="$(this).closest('.field-datagrid').find('[data-control=datagrid]').dataGrid('insertRow')">Insert Row</a>
<a href="#" class="btn btn-sm btn-default oc-icon-minus-square" onclick="$(this).closest('.field-datagrid').find('[data-control=datagrid]').dataGrid('removeRow')">Delete Row</a>
<!-- <a href="#" class="btn btn-sm btn-default oc-icon-floppy-o">Save as CSV</a> -->
<!-- <a href="#" class="btn btn-sm btn-default oc-icon-upload">Import CSV</a> -->
</div>