Question: Bootstrap table with Breadcrumb path onces clicked on a cell value and refresh data Basically trying to create some sort of folder/file structure where the
Bootstrap table with Breadcrumb path onces clicked on a cell value and refresh data
Basically trying to create some sort of folder/file structure where the anchor tag value are the folders and going through a breadcrumb like structure.
Documentation reference API: http://bootstrap-table.wenzhixin.net.cn/documentation/
Example Output wanting:
a. Table: Clicked Folder1
b. Breadcrumb: Now path is Main/Folder1
c. Table will refresh with sub data "Nested" and show only two rows
d. Two rows are Folder1.2 and File1.1
e. If cliked on Folder1.2, it will show the subset(nested) of that folder and the breadcrumb path will Main/Folder1/Folder1.2
f. Also by clicking on the breadcrumb, i want the table to refresh a show data pertaining to that folder.
HTML:
- Main
- Folder1
- Folder1.2
Javascript:
// Bootstrap Table - subtable example with real data, forked from http://jsfiddle.net/myvykf24/1/ and created for https://github.com/wenzhixin/bootstrap-table/issues/2121
var data = [{
'name': 'Folder1',
'file': '',
'type': 'folder',
'nested': [{
'name': 'Folder1.2',
'file': '',
'type': 'folder',
'nested': [{
'name': 'File1.2',
'file': 'file2.txt',
'type': 'file'
}]
},{
'name': 'File1.1',
'file': 'file1.txt',
'type': 'file'
}]
}, {
'name': 'Folder2',
'file': '',
'type': 'folder',
'nested': [{
'name': '2.3',
'file': '2.4'
}]
}, {
'name': 'File Test',
'file': 'filetest.txt',
'type': 'file'
}]
var $table = $('#table');
var $table2 = $('#table2');
$(function() {
$table.bootstrapTable({
columns: [{
field: 'name',
title: 'Name',
formatter: formatter
}, {
field: 'file',
title: 'File'
}],
data: data,
onToggle: function (arg1) {
// ...
if(arg1){
$( "#table" ).removeClass("table-condensed");
}
else{
$( "#table" ).addClass("table-condensed");
}
},
onClickCell: function(field, value, row, $element) {
$element.html('
').find('table').bootstrapTable({
columns: [{
field: 'name',
title: 'Name',
formatter: formatter
}, {
field: 'file',
title: 'File'
}],
data: row.nested,
});
}
});
});
function formatter(value, row, index, field) {
if(row.type === 'folder'){
return '' + value + '';
}
return value;
}
Image:
Main Folder1 Folder1.2 Search Name Folder1 Folder2 File Test File filetest.txt Main Folder1 Folder1.2 Search Name Folder1 Folder2 File Test File filetest.txt
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help