github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

enhance ExpandableTable for table tree (#2907) 

* enhance ExpandableTable for table tree
* remove unused rotate class
* fix html validator error/warnings
pull/2911/head
REJack 2020-07-22 16:03:54 +02:00 committed by GitHub
parent c9603ef5aa
commit 01e00cd43d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 124 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build/js/ExpandableTable.js
View File

@ -29,8 +29,8 @@ const SELECTOR_ARIA_ATTR = 'aria-expanded'
* ====================================================
*/
class ExpandableTable {
constructor(element, config) {
this._config = config
constructor(element, options) {
this._options = options
this._element = element
}
@ -72,16 +72,17 @@ class ExpandableTable {
// Static
static _jQueryInterface(config) {
static _jQueryInterface(operation) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new ExpandableTable($(this))
$(this).data(DATA_KEY, data)
}
if (config === 'init' || config === 'toggleRow') {
data[config]()
if (typeof operation === 'string' && operation.match(/init|toggleRow/)) {
data[operation]()
}
})
}

32
build/scss/_table.scss
View File

@ -79,11 +79,27 @@
[data-widget="expandable-table"] {
cursor: pointer;
i {
transition: transform $transition-speed linear;
}
&[aria-expanded="true"] {
td > i {
// stylelint-disable selector-max-attribute
&[class*="right"] {
transform: rotate(90deg);
}
&[class*="left"] {
transform: rotate(-90deg);
}
// stylelint-enable selector-max-attribute
}
}
}
.expandable-body {
td {
padding: 0;
> td {
padding: 0 !important;
width: 100%;
> div,
@ -91,4 +107,16 @@
padding: $table-cell-padding;
}
}
.table {
width: calc(100% - #{$table-cell-padding});
margin: 0 0 0 $table-cell-padding;
tr:first-child {
td,
th {
border-top: none;
}
}
}
}

89
pages/tables/simple.html
View File

@ -1313,7 +1313,94 @@
<!-- /.card -->
</div>
</div>
<!-- -->
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Expandable Table Tree</h3>
</div>
<!-- ./card-header -->
<div class="card-body p-0">
<table class="table table-hover">
<tbody>
<tr>
<td class="border-0">183</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="true">
<td>
<i class="fas fa-caret-right fa-fw"></i>
219
</td>
</tr>
<tr class="expandable-body">
<td>
<div class="p-0">
<table class="table table-hover">
<tbody>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
<i class="fas fa-caret-right fa-fw"></i>
219-1
</td>
</tr>
<tr class="expandable-body">
<td>
<div class="p-0">
<table class="table table-hover">
<tbody>
<tr>
<td>219-1-1</td>
</tr>
<tr>
<td>219-1-2</td>
</tr>
<tr>
<td>219-1-3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>219-2</td>
</tr>
<tr>
<td>219-3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>657</td>
</tr>
<tr>
<td>175</td>
</tr>
<tr>
<td>134</td>
</tr>
<tr>
<td>494</td>
</tr>
<tr>
<td>832</td>
</tr>
<tr>
<td>982</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->