docs.sheetjs.com/docz/static/dojo/combo.html

61 lines
2.2 KiB
HTML
Raw Normal View History

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/>
This demo fetches <a href="https://sheetjs.com/pres.xlsx">https://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://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>