When preparing for my last Spry presentation, I noticed two new files that weren't documented: SpryCSVDataSet.js and SpryTSVDataSet.js. I pinged the Spry team and discovered that 1.6 added support for both comma separated value files and tab separated files. They just didn't have time to document it - but the cool thing is that - just like JSON support, once you make the dataset your work is done. Everything else is the same. Consider this example:
<html><head> <script src="/spryjs/SpryData.js"></script> <script src="/spryjs/SpryCSVDataSet.js"></script>
<script> var ds1 = new Spry.Data.CSVDataSet("people.txt"); </script> <style> .hover { background-color: yellow; } </style> </head>
<body>
<div spry:region="ds1"> <table border="1" cellpadding="10"> <tr> <th onClick="ds1.sort('name','toggle')">Name</th> <th onClick="ds1.sort('group','toggle')">Group</th> </tr> <tr spry:repeat="ds1" spry:hover="hover"> <td>{name}</td><td>{group}</td> </tr> </table> </div>
</body> </html>
As you can see - the only thing in this file unlike other Spry demos I've shown is the use of the new JS file and the creation of a CSVDataSet. Spry supports both cases where CSV files contain the headers in the first row and when they do not. If your CSV file does not contain headers in the first row, you simply flag it when creating the dataset. You can optionally assign it headers as well:
var ds1 = new Spry.Data.CSVDataSet("employees-01.txt", {firstRowAsHeaders: false, columnNames: [ "lastname", "firstname","userid" ] });For TSV support, you can even specify a different delimiter:
var ds1 = new Spry.Data.TSVDataSet("employees-01.txt", { delimiter: "|"});Here are two examples:
CSV Example
TSV Example
If you are using Firebug, you can take a look at the text files being loaded. Thanks to Kin Blas for the help!