Skip to content

Commit 78b9126

Browse files
HelloSebastianHelloSebastian
authored
Fixed header bulk form filter control (#6)
* fix fixed-header and bulk form * filter-control * update readme
1 parent e52915e commit 78b9126

11 files changed

Lines changed: 70 additions & 47 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ $ php bin/console assets:install --symlink
9292
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
9393

9494
<!-- bootstrap-table CSS with all used extensions -->
95-
<link rel="stylesheet" href="{{ asset('bundles/hellobootstraptable/bootstrap-table.css') }}">
95+
{{ hello_bootstrap_table_css() }}
9696
```
9797

9898
**JavaScript**:
@@ -103,7 +103,7 @@ $ php bin/console assets:install --symlink
103103
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
104104

105105
<!-- bootstrap-table JS with all used extensions -->
106-
<script src="{{ asset('bundles/hellobootstraptable/bootstrap-table.js') }}"></script>
106+
{{ hello_bootstrap_table_js() }}
107107
```
108108

109109
You can also use other CSS frameworks. See the bootstrap-table documentation for more information.
@@ -199,8 +199,8 @@ class UserTable extends HelloBootstrapTable
199199
``` php
200200
// src/Controller/UserController.php
201201

202-
// ...
203202
use HelloSebastian\HelloBootstrapTableBundle\HelloBootstrapTableFactory;
203+
use App\HelloTable\UserTable;
204204
// ...
205205

206206
/**
@@ -224,6 +224,8 @@ public function index(Request $request, HelloBootstrapTableFactory $tableFactory
224224
### Step 3: Add table in Template
225225

226226
``` twig
227+
{# index.html.twig #}
228+
227229
{% extends 'base.html.twig' %}
228230
229231
{% block body %}
@@ -265,6 +267,7 @@ Represents column with text. With formatter you can create complex columns.
265267
| valign | string / null | null | Indicate how to align the cell data. `'top'`, `'middle'`, `'bottom'` can be used. |
266268
| falign | string / null | null | Indicate how to align the table footer. `'left'`, `'right'`, `'center'` can be used. |
267269
| filter | array | `[TextFilter::class, array()]` | Set filter to column (see [Filters](#filters)) |
270+
| filterControl | string | "input" | render text field in column header |
268271

269272
#### Example
270273

@@ -573,6 +576,7 @@ Table Dataset are provided directly to the `bootstrap-table` as data-attributes
573576
| search | bool | true |
574577
| show-columns | bool | true |
575578
| show-footer | bool | true |
579+
| filter-control | bool | false |
576580
| show-refresh | bool | true |
577581
| toolbar | string | "#toolbar" |
578582
| page-list | string | "[10, 25, 50, 100, 200, 500, All]" |

‎assets/app.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
require('bootstrap-table/dist/bootstrap-table.min.css');
22
require('bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css');
33
require("bootstrap-table/dist/extensions/page-jump-to/bootstrap-table-page-jump-to.min.css");
4+
require('bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.css');
45
require('./css/styles.css');
56

67
require('bootstrap-table/dist/bootstrap-table.min');
@@ -18,6 +19,7 @@ require("tableexport.jquery.plugin/libs/js-xlsx/xlsx.core.min");
1819
require("tableexport.jquery.plugin/tableExport.min");
1920

2021
require("bootstrap-table/dist/extensions/export/bootstrap-table-export.min");
22+
require('bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control');
2123

2224

2325
$(function () {
@@ -61,22 +63,29 @@ $(function () {
6163
</select>`;
6264
};
6365

64-
const $table = $(".hello-bootstrap-table");
65-
66-
if ($table.length) {
67-
const $bulkForm = $("#bulk_form");
68-
69-
$table.bootstrapTable('destroy').bootstrapTable({
70-
queryParams: function (params) {
71-
params.isCallback = true;
72-
return params;
73-
}
66+
const $tables = $(".hello-bootstrap-table");
67+
68+
if ($tables.length) {
69+
$tables.each(index => {
70+
const $table = $($tables[index]);
71+
const tableName = $table.data('id-table');
72+
73+
$table.bootstrapTable('destroy').bootstrapTable({
74+
queryParams: function (params) {
75+
params.isCallback = true;
76+
params.tableName = tableName;
77+
return params;
78+
}
79+
});
80+
81+
const $bulkForm = $("#bulk_form_" + tableName);
82+
$bulkForm.submit(function (e) {
83+
const selectedRows = $table.bootstrapTable("getSelections");
84+
const hidden = $table.find("bulk_form_" + tableName + " input[type=hidden]");
85+
hidden.val(JSON.stringify(selectedRows));
86+
});
7487
});
7588

76-
$bulkForm.submit(function (e) {
77-
const selectedRows = $table.bootstrapTable("getSelections");
78-
const hidden = $("#bulk_form input[type=hidden]");
79-
hidden.val(JSON.stringify(selectedRows));
80-
});
89+
8190
}
8291
});

‎assets/bootstrap-table-sticky-header.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
110110
stickyHeaderOffsetLeft = 0
111111
stickyHeaderOffsetRight = 0
112112
}
113-
this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}`)
113+
114+
this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}px`)
114115
this.$stickyContainer.css('left', `${stickyHeaderOffsetLeft}`)
115116
this.$stickyContainer.css('right', `${stickyHeaderOffsetRight}`)
116117
// create scrollable container for header

‎src/Columns/AbstractColumn.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,8 @@ protected function configureOutputOptions(OptionsResolver $resolver)
250250
'switchable' => true,
251251
'filterOptions' => null,
252252
'formatter' => null,
253-
'footerFormatter' => null
253+
'footerFormatter' => null,
254+
'filterControl' => "input"
254255
));
255256

256257
$resolver->setAllowedTypes('title', ['string', 'null']);
@@ -275,6 +276,7 @@ protected function configureOutputOptions(OptionsResolver $resolver)
275276

276277
$resolver->setAllowedTypes('formatter', ['string', 'null']);
277278
$resolver->setAllowedTypes('footerFormatter', ['string', 'null']);
279+
$resolver->setAllowedTypes('filterControl', ['string']);
278280
}
279281

280282
}

‎src/DependencyInjection/Configuration.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ private function addTableDatasetOptions()
8282
->booleanNode('show-columns')->end()
8383
->booleanNode('show-footer')->end()
8484
->booleanNode('show-refresh')->end()
85+
->booleanNode('filter-control')->end()
8586
->scalarNode('toolbar')->end()
8687
->scalarNode('page-list')->end()
8788
->integerNode('page-size')->end()

‎src/HelloBootstrapTable.php‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616

1717
abstract class HelloBootstrapTable
1818
{
19-
static $unique = 0;
20-
2119
/**
2220
* @var RouterInterface
2321
*/
@@ -74,8 +72,6 @@ abstract class HelloBootstrapTable
7472
*/
7573
public function __construct(RouterInterface $router, EntityManagerInterface $em, $options, $defaultOptions = array())
7674
{
77-
self::$unique++;
78-
7975
$this->router = $router;
8076
$this->_em = clone $em;
8177
$this->defaultOptions = $defaultOptions;
@@ -84,7 +80,7 @@ public function __construct(RouterInterface $router, EntityManagerInterface $em,
8480
$this->doctrineQueryBuilder = new DoctrineQueryBuilder($em, $this->getEntityClass(), $this->columnBuilder);
8581

8682
$dataBuilder = new DataBuilder($this->columnBuilder);
87-
$this->tableResponse = new TableResponse($this->doctrineQueryBuilder, $dataBuilder);
83+
$this->tableResponse = new TableResponse($this, $this->doctrineQueryBuilder, $dataBuilder);
8884

8985
$this->buildColumns($this->columnBuilder, $options);
9086
}
@@ -133,7 +129,7 @@ public function getResponse()
133129
}
134130

135131
/**
136-
* Returns table structure as encoded array.
132+
* Returns table structure as array.
137133
*
138134
* @return array
139135
*/
@@ -207,13 +203,13 @@ public function setTableOptions($options)
207203
$this->tableOptions = array_merge($this->tableOptions, $options);
208204
}
209205

210-
private function getTableName()
206+
public function getTableName()
211207
{
212208
$className = get_class($this);
213209
$className = strtolower($className);
214210
$className = str_replace("\\", "_", $className);
215211

216-
return $className . '_' . self::$unique;
212+
return $className;
217213
}
218214

219215
/**
@@ -232,6 +228,7 @@ protected function configureTableDataset(OptionsResolver $resolver)
232228
"show-columns" => true,
233229
"show-footer" => true,
234230
"show-refresh" => true,
231+
"filter-control" => false,
235232
"toolbar" => "#toolbar",
236233
"page-list" => "[10, 25, 50, 100, 200, 500, All]",
237234
"page-size" => 25,
@@ -267,6 +264,7 @@ protected function configureTableDataset(OptionsResolver $resolver)
267264
$resolver->setAllowedTypes("show-columns", ["bool"]);
268265
$resolver->setAllowedTypes("show-footer", ["bool"]);
269266
$resolver->setAllowedTypes("show-refresh", ["bool"]);
267+
$resolver->setAllowedTypes("filter-control", ["bool"]);
270268
$resolver->setAllowedTypes("toolbar", ["string", "null"]);
271269
$resolver->setAllowedTypes("page-list", ["string"]);
272270
$resolver->setAllowedTypes("page-size", ["int"]);

‎src/Resources/public/bootstrap-table.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Resources/public/bootstrap-table.js‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Resources/views/table/hello_bootstrap_table_toolbar.html.twig‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div id="toolbar"
2-
style="width: 100%">
3-
<form id="bulk_form" method="post" action="{{ table.tableOptions.bulkUrl }}">
4-
<select id="bulk_action"
5-
name="bulk_action"
1+
<div
2+
style="float:left; padding-top: 6px;">
3+
<form id="bulk_form_{{ table.tableName }}" method="post" action="{{ table.tableOptions.bulkUrl }}">
4+
<select name="bulk_action"
65
class="{{ table.tableOptions.bulkActionSelectClassNames }}"
76
style="width: auto; display: inline-block; vertical-align: middle; margin-right: 5px;">
87
{% for value, name in table.tableOptions.bulkActions %}

‎src/Response/TableResponse.php‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66

77
use HelloSebastian\HelloBootstrapTableBundle\Data\DataBuilder;
8+
use HelloSebastian\HelloBootstrapTableBundle\HelloBootstrapTable;
89
use HelloSebastian\HelloBootstrapTableBundle\Query\DoctrineQueryBuilder;
910
use Symfony\Component\HttpFoundation\Request;
1011
use Symfony\Component\OptionsResolver\Options;
@@ -21,6 +22,11 @@ class TableResponse
2122
*/
2223
private $doctrineQueryBuilder;
2324

25+
/**
26+
* @var HelloBootstrapTable
27+
*/
28+
private $bootstrapTable;
29+
2430
/**
2531
* @var DataBuilder
2632
*/
@@ -34,11 +40,13 @@ class TableResponse
3440
/**
3541
* TableResponse constructor. Created in HelloBootstrapTable.
3642
*
43+
* @param HelloBootstrapTable $bootstrapTable
3744
* @param DoctrineQueryBuilder $doctrineQueryBuilder
3845
* @param DataBuilder $dataBuilder
3946
*/
40-
public function __construct(DoctrineQueryBuilder $doctrineQueryBuilder, DataBuilder $dataBuilder)
47+
public function __construct(HelloBootstrapTable $bootstrapTable, DoctrineQueryBuilder $doctrineQueryBuilder, DataBuilder $dataBuilder)
4148
{
49+
$this->bootstrapTable = $bootstrapTable;
4250
$this->doctrineQueryBuilder = $doctrineQueryBuilder;
4351
$this->dataBuilder = $dataBuilder;
4452

@@ -86,6 +94,7 @@ public function configureRequestData(OptionsResolver $resolver)
8694
'order' => null,
8795
'limit' => 10,
8896
'isCallback' => false,
97+
'tableName' => '',
8998
'searchable' => array()
9099
));
91100

@@ -114,13 +123,13 @@ public function getData()
114123
}
115124

116125
/**
117-
* Checks if request is initial or callback.
126+
* Checks if request is initial or callback and if table name is equal.
118127
*
119128
* @return bool
120129
*/
121130
public function isCallback()
122131
{
123-
return $this->requestData['isCallback'];
132+
return $this->requestData['isCallback'] && $this->requestData['tableName'] == $this->bootstrapTable->getTableName();
124133
}
125134

126135
/**

0 commit comments

Comments
 (0)