Javascript to collapse Bootstrap table rows
I have some javascript that expands a table row on click, the row expands fine and if I select a row above the row I have just expanded, that expands too. However, if I select a row below the an expanded row, it does does expand slightly but not with the content that appears in the rows above. (hope this makes sense.
What I would like to do is to close all expanded rows before it opens the one selected so that there can only be one expanded row expanded at a time, but not sure how to do this. I assume i would have to do this wth a class. Am new to javascript, so I may be missing something obvious.
Thanks in advance
Code below;
What I would like to do is to close all expanded rows before it opens the one selected so that there can only be one expanded row expanded at a time, but not sure how to do this. I assume i would have to do this wth a class. Am new to javascript, so I may be missing something obvious.
Thanks in advance
Code below;
// ROW EXPANDER CONSTRUCT =================================================================
var $table = $('#testTable');
$table.on('expand-row.bs.table', function(e, index, row, $detail) {
var res = $("#desc" + index).html();
$detail.html(res);
});
$table.on("click-row.bs.table", function(e, row, $tr) {
// Get selected row
var tbl = document.getElementById("testTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
tbl.rows[i].onclick = function () { getRowVal(this); };
}
}
function getRowVal(row) {
var rowVal = parseInt(row.rowIndex);
var rowVal = rowVal-1
console.log('Row selected - '+ rowVal)
if ($tr.next().is('tr.detail-view')) {
$('.spanEdit').attr('class', 'spanEdit');
$table.bootstrapTable('collapseRow', $tr.data('index'));
}
else {
$('.spanEdit').attr('id', 'desc'+rowVal);
$table.bootstrapTable('expandRow', $tr.data('index'));
}
}
});ASKER
HTML below, please note that the table is dynamically populated from an object called data1 which is jSon Data, so what you see below is before the table is populated. The css is controlled by the bootstrap css, but there are a few lines of custom css to deal with table hover and row select. Do you need to see those. I think all I need is some javascript to collapse all expanded rows, this would solve my problem. As each of the expanded elements have the same class, if I knew how to collapse a row by using the class, that would be great.
By way of background, the expanded rows come from the span with the class spanEdit, this is created on the fly and added to the row as the expanded element.
By way of background, the expanded rows come from the span with the class spanEdit, this is created on the fly and added to the row as the expanded element.
</div>
<div class="table" >
<table id="testTable"
class="table table-striped pagination-primary
table-hover
table-responsive"
data-toggle="table"
data-show-export="true"
data-pagination="false"
data-search="true"
data-detail-view="true"
data-show-refresh="true"
data-click-to-select="true">
<!-- <caption>List of users</caption> -->
<thead class="thead-dark">
<tr>
<th data-field="Client_ID" data-visible="false">Client_ID </th>
<th data-field="Salutation" data-sortable="true">Title</th>
<th data-field="FirstName" data-sortable="true">First Name</th>
<th data-field="Surname" data-sortable="true">Surname</th>
<th data-field="Tel" data-sortable="true">Tel</th>
<th data-field="Email" data-sortable="true">Email Address</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>other content</td>
<span class="spanEdit"style="display: none;" id="desc3">
<div id="expanderWrap" class="ExpanderWrap"><h4>Description:</h4>
<br>
<div id="expanderContainer" class+"expContainer">
This is row with id=0, containing other content
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
</div>
</div>
</span>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="messages" role="tabpanel">
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
</div>
<div class="tab-pane" id="settings" role="tabpanel">
<p>
"I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
</p>
</div>
</div>
</div>
</div>
</div> 
As i debug your js code I have notice some syntactical and logical errors as they seems at the image below...\
The on() method takes the parameters as it show below
Also at the
The on() method takes the parameters as it show below
Also at the
$table.on("click", function(e, row, $tr){
//some code here
});ASKER
Sorry there was a slight error in the script, see below, I have annotated
What I want to do is pass a value that collapses all rows that are expanded, this is where I am struggling
// ROW EXPANDER CONSTRUCT =================================================================
var $table = $('#testTable');
$table.on('expand-row.bs.table', function(e, index, row, $detail) {
var res = $("#desc" + index).html();// the html of the span is what is being passed as a string to the expanded row.
$detail.html(res);
});
$table.on("click-row.bs.table", function(e, row, $tr) {
// Get selected row
var tbl = document.getElementById("testTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
tbl.rows[i].onclick = function () { getRowVal(this); };
}
}
// Get the clicked row value using this function
function getRowVal(row) {
var rowVal = parseInt(row.rowIndex);
var rowVal = rowVal-1
console.log('Row selected - '+ rowVal)
if ($tr.next().is('tr.detail-view')) {
// the row value that is obtained above is passed in the code below to provide the 'index'
$('.spanEdit').attr('id', 'desc'+rowVal); // this is the value that is passed to the index below
$table.bootstrapTable('collapseRow', $tr.data('index')); // this index is then used to collapse the required row
}
else {
$('.spanEdit').attr('id', 'desc'+rowVal); // again rowVal is passed to the index and this expands the row
$table.bootstrapTable('expandRow', $tr.data('index'));
}
}
});What I want to do is pass a value that collapses all rows that are expanded, this is where I am struggling
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
PS
If you want to check if the tr elements has the collapse name class additionally you can add this script:
If you want to check if the tr elements has the collapse name class additionally you can add this script:
if($('tr').className!=='collapse'){
$('tr').addClass('collapse');
}
ASKER
Thanks that's really helpful
Could you post the HTML-CSS code of the table?