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('
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:
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access with AI-Powered Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started