mirror of https://github.com/ColorlibHQ/AdminLTE
enhance ExpandableTable for table tree (#2907)
* enhance ExpandableTable for table tree * remove unused rotate class * fix html validator error/warningspull/2911/head
parent
c9603ef5aa
commit
01e00cd43d
|
@ -29,8 +29,8 @@ const SELECTOR_ARIA_ATTR = 'aria-expanded'
|
||||||
* ====================================================
|
* ====================================================
|
||||||
*/
|
*/
|
||||||
class ExpandableTable {
|
class ExpandableTable {
|
||||||
constructor(element, config) {
|
constructor(element, options) {
|
||||||
this._config = config
|
this._options = options
|
||||||
this._element = element
|
this._element = element
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -72,16 +72,17 @@ class ExpandableTable {
|
||||||
|
|
||||||
// Static
|
// Static
|
||||||
|
|
||||||
static _jQueryInterface(config) {
|
static _jQueryInterface(operation) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
let data = $(this).data(DATA_KEY)
|
let data = $(this).data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new ExpandableTable($(this))
|
data = new ExpandableTable($(this))
|
||||||
$(this).data(DATA_KEY, data)
|
$(this).data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config === 'init' || config === 'toggleRow') {
|
if (typeof operation === 'string' && operation.match(/init|toggleRow/)) {
|
||||||
data[config]()
|
data[operation]()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -79,11 +79,27 @@
|
||||||
|
|
||||||
[data-widget="expandable-table"] {
|
[data-widget="expandable-table"] {
|
||||||
cursor: pointer;
|
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 {
|
.expandable-body {
|
||||||
td {
|
> td {
|
||||||
padding: 0;
|
padding: 0 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
> div,
|
> div,
|
||||||
|
@ -91,4 +107,16 @@
|
||||||
padding: $table-cell-padding;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1313,7 +1313,94 @@
|
||||||
<!-- /.card -->
|
<!-- /.card -->
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
</div><!-- /.container-fluid -->
|
||||||
</section>
|
</section>
|
||||||
<!-- /.content -->
|
<!-- /.content -->
|
||||||
|
|
Loading…
Reference in New Issue