The tools:
1. use Google data tables to add sort/etc. functionality to a table.
https://developers.google.com/chart/interactive/docs/examples#table_example
2. install and fancybox and jquery accessories
http://fancybox.net/
3. enable HTML for the column you wish to call the modal from and then escape the chars.
IMPORTANT: note the allow HTML and the \" (this is how you must escape the double quotes in order to not break the data structure).
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var options = {'showRowNumber': false, 'allowHtml': true, 'pageSize': 10, 'page': 'enable', 'sortColumn': 0, 'sortAscending':false}
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date Done');
data.addColumn('number', 'Pounds');
data.addColumn('number', 'Kilos');
data.addColumn('number', 'Reps');
data.addColumn('string', 'Lifts');
data.addColumn('string', 'Comments');
data.addColumn('string', 'ranked');
data.addColumn('string', 'edit');
data.addRows(1);
data.setCell(0,0,new Date(2008,5,2));
data.setCell(0,1,12);
data.setCell(0,5,'<a class=\"fancybox fancybox.iframe\" href=\"fancybox/demo/iframe.html\">testing</a>');
var table = new
google.visualization.Table(document.getElementById('table_div_5'));
table.draw(data,options,null);
}
</script>
The result? Check out:http://www.logsitall.com/google-table.asp
This means you can open an editor form or info window from an HTML link that is embedded within a google datatable. Thanks to fancybox you can even refresh the parent (google datatable) from the close link within the modal...
Happy coding
-bill
No comments:
Post a Comment