2023-11-28 07:05:59 +00:00
<!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 / >
2024-04-26 04:16:13 +00:00
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.
2023-11-28 07:05:59 +00:00
< 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 */
2024-04-26 04:16:13 +00:00
xhr("https://docs.sheetjs.com/pres.xlsx", {
2023-11-28 07:05:59 +00:00
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 >
