forked from sheetjs/docs.sheetjs.com
61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="robots" content="noindex">
|
|
<title>SheetJS + Dojo Memory Store Demo</title>
|
|
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dijit/themes/claro/claro.css">
|
|
</head>
|
|
<body class="claro">
|
|
<h1>SheetJS + Dojo Memory Store Demo</h1>
|
|
<br/>
|
|
This demo fetches <a href="https://docs.sheetjs.com/pres.xlsx">https://docs.sheetjs.com/pres.xlsx</a>, parses the file, generates a Memory store from the first worksheet, and loads a Combo box. When a President is selected, the text box will display the "Index" field from the dataset.
|
|
<br/>
|
|
(this HTML page is not minified -- feel free to view source!)<br/><br/>
|
|
<a href="https://docs.sheetjs.com">SheetJS CE Documentation</a><br/><br/>
|
|
<script>
|
|
dojoConfig = {
|
|
parseOnLoad: true,
|
|
packages: [
|
|
{ name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" }
|
|
]
|
|
};
|
|
</script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js" data-dojo-config=""></script>
|
|
<script>
|
|
require([
|
|
"dojo/ready",
|
|
"dojo/request/xhr",
|
|
"dojo/store/Memory",
|
|
"dijit/registry",
|
|
"xlsx"
|
|
], function(ready, xhr, Memory, registry, _XLSX) {
|
|
ready(function() {
|
|
/* fetch test file */
|
|
xhr("https://docs.sheetjs.com/pres.xlsx", {
|
|
headers: { "X-Requested-With": null },
|
|
handleAs: "arraybuffer"
|
|
}).then(function(ab) {
|
|
/* read ArrayBuffer */
|
|
var wb = XLSX.read(ab);
|
|
/* generate row objects from first worksheet */
|
|
var ws = wb.Sheets[wb.SheetNames[0]];
|
|
var aoo = XLSX.utils.sheet_to_json(ws);
|
|
|
|
/* generate memory store and assign to combo box*/
|
|
var store = new Memory({ data: aoo });
|
|
registry.byId("combo").store = store;
|
|
|
|
/* when a President is selected, display the index */
|
|
registry.byId("combo").watch("item", function(w, oitem, nitem) {
|
|
registry.byId("pindex").set("value", nitem.Index);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<b>Select a president</b><br/>
|
|
<div id="combo" data-dojo-type="dijit/form/ComboBox" data-dojo-props="searchAttr:'Name'"></div><br/>
|
|
<b>Index of Selected President</b><br/>
|
|
<div id="pindex" data-dojo-type="dijit/form/TextBox"></div>
|
|
</body>
|
|
</html> |