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

Merge pull request #3458 from hkvstore/expandable-table 

Improve expandable table
pull/3459/head
REJack 2021-02-28 20:58:08 +01:00 committed by GitHub
parent 0e9713c905 daa448d4df
commit db941e94d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/js/ExpandableTable.js
View File

@ -21,6 +21,7 @@ const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}` const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const SELECTOR_TABLE = '.expandable-table' const SELECTOR_TABLE = '.expandable-table'
const SELECTOR_EXPANDABLE_BODY = '.expandable-body'
const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]' const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
const SELECTOR_ARIA_ATTR = 'aria-expanded' const SELECTOR_ARIA_ATTR = 'aria-expanded'
@ -39,7 +40,7 @@ class ExpandableTable {
init() { init() {
$(SELECTOR_DATA_TOGGLE).each((_, $header) => { $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
const $type = $($header).attr(SELECTOR_ARIA_ATTR) const $type = $($header).attr(SELECTOR_ARIA_ATTR)
const $body = $($header).next().children().first().children() const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
if ($type === 'true') { if ($type === 'true') {
$body.show() $body.show()
} else if ($type === 'false') { } else if ($type === 'false') {
@ -53,17 +54,17 @@ class ExpandableTable {
const $element = this._element const $element = this._element
const time = 500 const time = 500
const $type = $element.attr(SELECTOR_ARIA_ATTR) const $type = $element.attr(SELECTOR_ARIA_ATTR)
const $body = $element.next().children().first().children() const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
$body.stop() $body.stop()
if ($type === 'true') { if ($type === 'true') {
$body.slideUp(time, () => { $body.slideUp(time, () => {
$element.next().addClass('d-none') $element.next(SELECTOR_EXPANDABLE_BODY).addClass('d-none')
}) })
$element.attr(SELECTOR_ARIA_ATTR, 'false') $element.attr(SELECTOR_ARIA_ATTR, 'false')
$element.trigger($.Event(EVENT_COLLAPSED)) $element.trigger($.Event(EVENT_COLLAPSED))
} else if ($type === 'false') { } else if ($type === 'false') {
$element.next().removeClass('d-none') $element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
$body.slideDown(time) $body.slideDown(time)
$element.attr(SELECTOR_ARIA_ATTR, 'true') $element.attr(SELECTOR_ARIA_ATTR, 'true')
$element.trigger($.Event(EVENT_EXPANDED)) $element.trigger($.Event(EVENT_EXPANDED))

4
build/scss/_table.scss
View File

@ -82,11 +82,11 @@
[data-widget="expandable-table"] { [data-widget="expandable-table"] {
cursor: pointer; cursor: pointer;
i { i.expandable-table-caret {
transition: transform $transition-speed linear; transition: transform $transition-speed linear;
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
td > i { td i.expandable-table-caret {
// stylelint-disable selector-max-attribute // stylelint-disable selector-max-attribute
&[class*="right"] { &[class*="right"] {
transform: rotate(90deg); transform: rotate(90deg);

32
pages/tables/simple.html
View File

@ -1446,7 +1446,7 @@
</tr> </tr>
<tr data-widget="expandable-table" aria-expanded="true"> <tr data-widget="expandable-table" aria-expanded="true">
<td> <td>
<i class="fas fa-caret-right fa-fw"></i> <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
219 219
</td> </td>
</tr> </tr>
@ -1457,7 +1457,7 @@
<tbody> <tbody>
<tr data-widget="expandable-table" aria-expanded="false"> <tr data-widget="expandable-table" aria-expanded="false">
<td> <td>
<i class="fas fa-caret-right fa-fw"></i> <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
219-1 219-1
</td> </td>
</tr> </tr>
@ -1480,8 +1480,32 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr data-widget="expandable-table" aria-expanded="false">
<td>219-2</td> <td>
<button type="button" class="btn btn-primary p-0">
<i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
</button>
219-2
</td>
</tr>
<tr class="expandable-body">
<td>
<div class="p-0">
<table class="table table-hover">
<tbody>
<tr>
<td>219-2-1</td>
</tr>
<tr>
<td>219-2-2</td>
</tr>
<tr>
<td>219-2-3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr> </tr>
<tr> <tr>
<td>219-3</td> <td>219-3</td>