<html>
<head>
<script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
<script src="example1.js"></script>
</head>
<style>
.ag-file-browser .ag-root {
border: 1px solid grey;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.ag-file-browser .ag-cell {
padding-left: 4px;
padding-right: 4px;
}
.ag-file-browser .ag-column-moving .ag-cell {
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
-o-transition: left 0.2s;
-ms-transition: left 0.2s;
transition: left 0.2s;
}
.ag-file-browser .ag-header-cell-moving .ag-header-cell-label {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.ag-file-browser .ag-header-cell-moving {
background-color: #bebebe;
}
.ag-file-browser .ag-header-cell-moving-clone {
border-right: 1px solid #808080;
border-left: 1px solid #808080;
background-color: rgba(220,220,220,0.8);
}
.ag-file-browser .ag-header {
background: -webkit-linear-gradient(white, lightgrey); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, lightgrey); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, lightgrey); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, lightgrey); /* Standard syntax */
border-bottom: 1px solid grey;
}
.ag-file-browser .ag-header-cell {
border-right: 1px solid grey;
}
.ag-file-browser .ag-header-cell-label {
padding: 4px;
}
.ag-file-browser .ag-row:hover {
background-color: aliceblue;
}
.ag-file-browser .ag-row {
background-color: white;
}
.ag-file-browser .ag-body {
background-color: #ffffff;
}
.ag-file-browser .ag-body-viewport {
background-color: #ffffff;
}
.ag-file-browser .ag-menu {
background-color: #ffffff;
border: 1px solid grey;
}
</style>
<div style="border: 1px solid darkgrey;
width: 800px;
background-color: lightgrey;
border-radius: 5px;
padding: 3px;">
<div style="border: 1px solid darkgrey; padding-left: 10px; margin-bottom: 2px; background-color: white;" id="selectedFile">Select a file below...</div>
<div style="width: 100%; height: 400px;"
id="exampleFileBrowser"
class="ag-file-browser">
</div>
</div>
</html>
(function() {
var rowData = [
{
folder: true,
open: true,
name: 'C:',
children: [
{folder: true,
name: 'Windows',
size: '',
type: 'File Folder',
dateModified: '27/02/2014 04:12',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Program Files',
size: '',
type: 'File Folder',
dateModified: '11/09/2013 02:11',
open: true,
children: [
{folder: true,
name: 'ASUS',
size: '',
type: 'File Folder',
dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Classic Shell', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Common Files', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'DisplayLink Core Software', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Intel', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Internet Explorer', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Intel Corporation', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'Java', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
open: true,
children: [
{folder: true,
name: 'jdk1.8.0', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'java.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'javac.exe', size: '1 kb', type: 'Application', dateModified: '27/11/2012 04:12'},
{name: 'weblaunch.exe', size: '21 kb', type: 'Application', dateModified: '18/03/2014 00:56'}
]
},
{folder: true,
name: 'jre1.8.0_31', size: '', type: 'File Folder', dateModified: '13/03/2014 1014',
children: [
{name: 'java.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'javac.exe', size: '1 kb', type: 'Application', dateModified: '27/11/2012 04:12'},
{name: 'weblaunch.exe', size: '21 kb', type: 'Application', dateModified: '18/03/2014 00:56'}
]
},
{name: 'bfsve.exe', size: '56 kb', type: 'Application', dateModified: '13/03/2014 10:14'},
{name: 'csup.txt', size: '1 kb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'diagwrn.xml', size: '21 kb', type: 'XML File', dateModified: '18/03/2014 00:56'}
]
}
]},
{group: false, name: 'boot.ini', size: '16 kb', type: 'Boot File', dateModified: '27/11/2012 04:12'},
{group: false, name: 'system.cfg', size: '13 kb', type: 'System File', dateModified: '18/03/2014 00:56'}
]
},
{
folder: true,
name: 'D:',
children: [
{name: 'Game of Thrones s05e01.avi', size: '1034 mb', type: 'Movie', dateModified: '13/03/2014 10:14'},
{name: 'The Knick s01e01', size: '523 mb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
{name: 'musicbackup1.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'},
{name: 'musicbackup2.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'}
]
}
];
var columnDefs = [
{headerName: "Name", field: "name", width: 250,
cellRenderer: 'group',
cellRendererParams: {
innerRenderer: innerCellRenderer
}
},
{headerName: "kids", field: "children.length", width: 150},
{headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
{headerName: "Type", field: "type", width: 150},
{headerName: "Date Modified", field: "dateModified", width: 150},
];
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
animateRows: true,
rowHeight: 20,
getNodeChildDetails: function(file) {
if (file.folder) {
return {
group: true,
children: file.children,
expanded: file.open
};
} else {
return null;
}
},
onRowClicked: rowClicked
};
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
document.querySelector('#selectedFile').innerHTML = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
var kids = params.data.children ? params.data.children.length : 0;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + ' (' + kids + ')';
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#exampleFileBrowser');
new agGrid.Grid(gridDiv, gridOptions);
});
})();