npm - gridjs-spreadsheet - Versions diffs - 24.12.0 → 25.1.0 - Mend

gridjs-spreadsheet 24.12.0 → 25.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/example/src/main/resources/templates/fileFromUpload.html ADDED Viewed

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>gridjs-web-demo</title>
+<style>
+::-webkit-scrollbar, ::-webkit-scrollbar-button {
+	width: 8px;
+	height: 8px;
+}
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+	border-radius: 10px;
+	background-color: #FFF;
+}
+::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+	background-color: #AAA;
+}
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.container {
+	flex: 1;
+	overflow: hidden;
+}
+.big-div, canvas {
+	width: 100%;
+	height: 100%;
+	object-fit: contain; /* 对于图像或视频很有用 */
+}
+</style>
+<!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
+    <link rel="stylesheet" href="/xspread/bootstrap.min.22.5.5.2.css?v=20220315" />
+    <script src="/xspread/jquery-2.1.1.js"></script>
+    <link rel="stylesheet" href="/xspread/jquery-ui.min.css" />
+    <script src="/xspread/jquery-ui.min.js"></script>
+    <script src="/xspread/jszip.min.js"></script>
+    <!--    <script src="vconsole.min.js"></script> -->
+    <!--for local reference-->
+  <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
+     <script src="/xspread/xspreadsheet.js?v=20230525"></script>
+    <!--for release reference-->
+      <!--  <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.css">
+    <script src="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.js"></script>  -->
+</head>
+<body>
+    <!--<div style="height:300px"></div>
+    <div style="height:300px"></div>-->
+    <div id="gridjs-demo-uid"></div>
+    <div id="status"></div>
+    <script>
+        function vtrace() {
+            let stack = (new Error()).stack
+            console.log(stack);
+        }
+        let xs;
+        let rdata;
+        let uniqueid = '[[${uid}]]';
+        //var local = 'http://localhost:24262';
+        let imagediv = 'imagedive';
+        let basiczorder = 5678;
+        let sheets = [];
+        let jsondata = null;
+        $(function () {
+            $.ajax({
+               // url: '/GridJs2/DetailFileJsonWithUid?filename=' + '[[${file}]]' + '&uid=' + uniqueid,
+                url: '/GridJs2/DetailStreamJsonWithUidFromUpload?filename=' + '[[${file}]]' + '&uid=' + uniqueid,
+                type: 'GET',
+                dataType: 'text',
+                timeout: 59000,
+                cache: false,
+                beforeSend: LoadFunction,
+                error: erryFunction,
+                success: succFunction,
+            });
+            function LoadFunction() {
+                $('#status').html('loading...');
+            }
+            function erryFunction() {
+                alert('error');
+            }
+            function succFunction(tt) {
+                $('#status').html('success');
+                var exceldata = tt;
+                //.replace(/\n/g,"\\\\n");
+                jsondata = JSON.parse(exceldata);
+                if (jsondata.Error) {
+                    alert(jsondata.Error);
+                } else {
+                    loadNormalContext(jsondata);
+                }
+            }
+        });
+        const loadNormalContext = (sheet) => {
+            const option = {
+                updateMode: 'server',
+                updateUrl: '/GridJs2/UpdateCell',
+                showToolbar: true,
+                // showFileName:false,
+                //showGrid: true,
+                //mode: 'edit',
+                mode: 'edit',
+                //support multiple language ,the locale is: en zh es pt de ru nl
+                local: 'en',
+                loadingGif:'/xspread/content/img/updating.gif',
+            };
+            loadWithOption(jsondata, option);
+        };
+        function loadWithOption(jsondata, option) {
+            $('#gridjs-demo-uid').empty();
+            //record uniqueid
+            uniqueid = jsondata.uniqueid;
+            sheets = jsondata.data;
+            const filename = jsondata.filename;
+            const fileDownloadUrl = "/GridJs2/Download";
+            const oleDownloadUrl = "/GridJs2/Ole";
+            const imageurl = "/GridJs2/ImageUrl";
+            const imageuploadurl1 = "/GridJs2/AddImage";
+            const imageuploadurl2 = "/GridJs2/AddImageByURL";
+            const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
+            const lazyLoadingUrl = "/GridJs2/LazyLoading";
+            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
+                console.log(cdata);
+                console.log(xs.validate());
+            }
+            ).updateServerError((xhr, textStatus, errorThrown) => {
+                const s = ("error---") + ("code：" + xhr.status) + ("state:" + xhr.readyState) + ("msg:" + xhr.statusText) + ("text：" + xhr.responseText) + ("request status：" + textStatus) + (errorThrown);
+                console.log(s);
+            }).updateCellError((msg) => {
+                console.error(msg);
+                // xs.sheet.data.restoreLastCell();
+                alert(msg);
+            });
+            if (!jsondata.showtabs) {
+                xs.bottombar.hide();
+            }
+            xs.on('cell-selected', (cell, ri, ci) => {
+                console.log('cell selected:', cell, ', ri:', ri, ', ci:', ci);
+                if (ci === -1) {
+                    console.log('ci === -1 means a row selected ', ri);
+                }
+                if (ri === -1) {
+                    console.log('ri === -1 means a column selected', ci);
+                }
+            }).on('cells-selected', (cell, range) => {
+                console.log('range   selected:', cell, ', rang:', range);
+            }).on('object-selected', (obj) => {
+                console.log('obj selected id:', obj.id, ', type: ', obj.type);
+            }).on('sheet-selected', (id, name) => {
+                console.log('sheet selected id:', id, ', name: ', name);
+            }).on('sheet-loaded', (id, name) => {
+                console.log('sheet is loaded id:', id, ', name: ', name);
+            }).on('cell-edited', (text, ri, ci) => {
+                console.log('text:', text, ', ri: ', ri, ', ci:', ci);
+            });
+            xs.setUniqueId(uniqueid);
+            xs.setFileName(filename);
+            // xs.setImageInfo(imageurl, imageuploadurl1, imageuploadurl2, imagecopyurl, basiczorder, 'content/img/loading.gif');
+            xs.setImageInfo(imageurl, imageuploadurl1, imageuploadurl2, imagecopyurl, basiczorder);
+            xs.setFileDownloadInfo(fileDownloadUrl);
+            xs.setOleDownloadInfo(oleDownloadUrl);
+            //lazy loading
+            xs.setLazyLoadingUrl(lazyLoadingUrl);
+            xs.setOpenFileUrl("/gridjsdemo/list");
+            let activeSheetName = jsondata.actname;
+            if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
+                xs.setActiveSheetByName(activeSheetName).setActiveCell(jsondata.actrow, jsondata.actcol);
+            } else {
+                //some times if the active sheet is invisible or chartworksheet ,just use the first worksheet
+                activeSheetName = xs.bottombar.dataNames[0];
+                xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
+            }
+        }
+        function ColorReverse(OldColorValue) {
+            var OldColorValue = '0x' + OldColorValue.replace(/#/g, "");
+            var str = '000000' + (0xFFFFFF - OldColorValue).toString(16);
+            return '#' + str.substring(str.length - 6, str.length);
+        }
+        function save() {
+            if (!xs.buffer.isFinish()) {
+                alert('updating is inprogress,please try later');
+                return;
+            }
+            let datas = xs.datas;
+            delete datas.history;
+            delete datas.search;
+            delete datas.images;
+            delete datas.shapes;
+            var jsondata = {
+                sheetname: xs.sheet.data.name,
+                actrow: xs.sheet.data.selector.ri,
+                actcol: xs.sheet.data.selector.ci,
+                datas: xs.getUpdateDatas(),
+            };
+            const data = {
+                p: JSON.stringify(jsondata),
+                uid: uniqueid,
+            };
+            $.ajax({
+                url: local + '/GridJs2/Download',
+                type: 'post',
+                data: data,
+                success: function (datar, stutas, xhr) {
+                    console.log(datar);
+                    if (datar.startsWith('{')) {
+                        var ret = JSON.parse(datar);
+                        if (ret.err) {
+                            alert(ret.err);
+                        }
+                    } else {
+                        // window.location = local + '/GridJs2/Download2/' + datar;
+                        window.location = datar;
+                    }
+                },
+            });
+        }
+    </script>
+    <div style="display: none;z-index: 999;">
+        <div title='text highlight' id="textselectform">
+            <div>
+                <textarea id='textselect' name='textselect' rows='4' cols='50'>
+          </textarea>
+            </div>
+        </div>'
+    </div>
+</body>
+</html>

package/example/src/main/resources/templates/index.html ADDED Viewed

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>gridjs-web-demo</title>
+    <style>
+        ::-webkit-scrollbar, ::-webkit-scrollbar-button {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+            border-radius: 10px;
+            background-color: #FFF;
+        }
+        ::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+            background-color: #AAA;
+        }
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.container {
+	flex: 1;
+	overflow: hidden;
+}
+.big-div, canvas {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+    </style>
+    <!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
+    <link rel="stylesheet" href="/xspread/bootstrap.min.22.5.5.2.css?v=20220315" />
+    <script src="/xspread/jquery-2.1.1.js"></script>
+    <link rel="stylesheet" href="/xspread/jquery-ui.min.css" />
+    <script src="/xspread/jquery-ui.min.js"></script>
+    <script src="/xspread/jszip.min.js"></script>
+    <!--    <script src="vconsole.min.js"></script> -->
+    <!--for local reference-->
+  <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
+     <script src="/xspread/xspreadsheet.js?v=20230525"></script>
+    <!--for release reference-->
+      <!--  <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.css">
+    <script src="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.js"></script>  -->
+</head>
+<body>
+    <!--<div style="height:300px"></div>
+    <div style="height:300px"></div>-->
+    <div id="gridjs-demo-uid"></div>
+    <div id="status"></div>
+    <script>
+        function vtrace() {
+            let stack = (new Error()).stack
+            console.log(stack);
+        }
+        let xs;
+        let rdata;
+        let uniqueid = '[[${uid}]]';
+        //var local = 'http://localhost:24262';
+        let imagediv = 'imagedive';
+        let basiczorder = 5678;
+        let sheets = [];
+        let jsondata = null;
+        $(function () {
+            $.ajax({
+               // url: '/GridJs2/DetailFileJsonWithUid?filename=' + '[[${file}]]' + '&uid=' + uniqueid,
+                url: '/GridJs2/DetailStreamJsonWithUid?filename=' + '[[${file}]]' + '&uid=' + uniqueid,
+                type: 'GET',
+                dataType: 'text',
+                timeout: 59000,
+                cache: false,
+                beforeSend: LoadFunction,
+                error: erryFunction,
+                success: succFunction,
+            });
+            function LoadFunction() {
+                $('#status').html('loading...');
+            }
+            function erryFunction() {
+                alert('error');
+            }
+            function succFunction(tt) {
+                $('#status').html('success');
+                var exceldata = tt;
+                //.replace(/\n/g,"\\\\n");
+                jsondata = JSON.parse(exceldata);
+                if (jsondata.Error) {
+                    alert(jsondata.Error);
+                } else {
+                    loadNormalContext(jsondata);
+                }
+            }
+        });
+        const loadNormalContext = (sheet) => {
+            const option = {
+                updateMode: 'server',
+                updateUrl: '/GridJs2/UpdateCell',
+                showToolbar: true,
+                // showFileName:false,
+                //showGrid: true,
+                //mode: 'edit',
+                mode: 'edit',
+                //support multiple language ,the locale is: en zh es pt de ru nl
+                local: 'en',
+                loadingGif:'/xspread/content/img/updating.gif',
+            };
+            loadWithOption(jsondata, option);
+        };
+        function loadWithOption(jsondata, option) {
+            $('#gridjs-demo-uid').empty();
+            //record uniqueid
+            uniqueid = jsondata.uniqueid;
+            sheets = jsondata.data;
+            const filename = jsondata.filename;
+            const fileDownloadUrl = "/GridJs2/Download";
+            const oleDownloadUrl = "/GridJs2/Ole";
+            const imageurl = "/GridJs2/ImageUrl";
+            const imageuploadurl1 = "/GridJs2/AddImage";
+            const imageuploadurl2 = "/GridJs2/AddImageByURL";
+            const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
+            const lazyLoadingUrl = "/GridJs2/LazyLoading";
+            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
+                console.log(cdata);
+                console.log(xs.validate());
+            }
+            ).updateServerError((xhr, textStatus, errorThrown) => {
+                const s = ("error---") + ("code：" + xhr.status) + ("state:" + xhr.readyState) + ("msg:" + xhr.statusText) + ("text：" + xhr.responseText) + ("request status：" + textStatus) + (errorThrown);
+                console.log(s);
+            }).updateCellError((msg) => {
+                console.error(msg);
+                // xs.sheet.data.restoreLastCell();
+                alert(msg);
+            });
+            if (!jsondata.showtabs) {
+                xs.bottombar.hide();
+            }
+            xs.on('cell-selected', (cell, ri, ci) => {
+                console.log('cell selected:', cell, ', ri:', ri, ', ci:', ci);
+                if (ci === -1) {
+                    console.log('ci === -1 means a row selected ', ri);
+                }
+                if (ri === -1) {
+                    console.log('ri === -1 means a column selected', ci);
+                }
+            }).on('cells-selected', (cell, range) => {
+                console.log('range   selected:', cell, ', rang:', range);
+            }).on('object-selected', (obj) => {
+                console.log('obj selected id:', obj.id, ', type: ', obj.type);
+            }).on('sheet-selected', (id, name) => {
+                console.log('sheet selected id:', id, ', name: ', name);
+            }).on('sheet-loaded', (id, name) => {
+                console.log('sheet is loaded id:', id, ', name: ', name);
+            }).on('cell-edited', (text, ri, ci) => {
+                console.log('text:', text, ', ri: ', ri, ', ci:', ci);
+            });
+            xs.setUniqueId(uniqueid);
+            xs.setFileName(filename);
+            // xs.setImageInfo(imageurl, imageuploadurl1, imageuploadurl2, imagecopyurl, basiczorder, 'content/img/loading.gif');
+            xs.setImageInfo(imageurl, imageuploadurl1, imageuploadurl2, imagecopyurl, basiczorder);
+            xs.setFileDownloadInfo(fileDownloadUrl);
+            xs.setOleDownloadInfo(oleDownloadUrl);
+            //lazy loading
+            xs.setLazyLoadingUrl(lazyLoadingUrl);
+            xs.setOpenFileUrl("/gridjsdemo/list");
+            let activeSheetName = jsondata.actname;
+            if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
+                xs.setActiveSheetByName(activeSheetName).setActiveCell(jsondata.actrow, jsondata.actcol);
+            } else {
+                //some times if the active sheet is invisible or chartworksheet ,just use the first worksheet
+                activeSheetName = xs.bottombar.dataNames[0];
+                xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
+            }
+        }
+        function ColorReverse(OldColorValue) {
+            var OldColorValue = '0x' + OldColorValue.replace(/#/g, "");
+            var str = '000000' + (0xFFFFFF - OldColorValue).toString(16);
+            return '#' + str.substring(str.length - 6, str.length);
+        }
+        function save() {
+            if (!xs.buffer.isFinish()) {
+                alert('updating is inprogress,please try later');
+                return;
+            }
+            let datas = xs.datas;
+            delete datas.history;
+            delete datas.search;
+            delete datas.images;
+            delete datas.shapes;
+            var jsondata = {
+                sheetname: xs.sheet.data.name,
+                actrow: xs.sheet.data.selector.ri,
+                actcol: xs.sheet.data.selector.ci,
+                datas: xs.getUpdateDatas(),
+            };
+            const data = {
+                p: JSON.stringify(jsondata),
+                uid: uniqueid,
+            };
+            $.ajax({
+                url: local + '/GridJs2/Download',
+                type: 'post',
+                data: data,
+                success: function (datar, stutas, xhr) {
+                    console.log(datar);
+                    if (datar.startsWith('{')) {
+                        var ret = JSON.parse(datar);
+                        if (ret.err) {
+                            alert(ret.err);
+                        }
+                    } else {
+                        // window.location = local + '/GridJs2/Download2/' + datar;
+                        window.location = datar;
+                    }
+                },
+            });
+        }
+    </script>
+    <div style="display: none;z-index: 999;">
+        <div title='text highlight' id="textselectform">
+            <div>
+                <textarea id='textselect' name='textselect' rows='4' cols='50'>
+          </textarea>
+            </div>
+        </div>'
+    </div>
+</body>
+</html>

package/example/src/main/resources/templates/list.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>gridjs-web-demo file list</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+        }
+        .container {
+            width: 80%;
+            margin: auto;
+            overflow: hidden;
+        }
+        header {
+            background: #50b3a2;
+            color: #ffffff;
+            padding-top: 30px;
+            min-height: 70px;
+            border-bottom: #e8491d 3px solid;
+        }
+        header h1 {
+            text-align: center;
+            text-transform: uppercase;
+            margin: 0;
+            font-size: 24px;
+        }
+        .upload-form, .file-list {
+            background: white;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        .upload-form input[type="file"], .upload-form button {
+            display: block;
+            width: 100%;
+            margin: 10px 0;
+            padding: 10px;
+        }
+        footer {
+            text-align: center;
+            padding: 20px;
+            background: #50b3a2;
+            color: white;
+            margin-top: 20px;
+        }
+        a {
+            color: #50b3a2;
+            text-decoration: none;
+        }
+        a:hover {
+            color: #e8491d;
+        }
+    </style>
+</head>
+<body>
+  <script>
+        function openfile(element) {
+        	const filename = element.getAttribute('data-filename');
+        	const uid = element.getAttribute('data-uid');
+            const url =  '/gridjsdemo/Uidtml?filename=' + filename+'&uid='+uid;
+            window.open(url, "_blank");
+        }
+    </script>
+    <!-- 文件上传表单 -->
+ <div class="upload-form">
+<form method="post" action="/gridjsdemo/upload" enctype="multipart/form-data">
+    <!-- accept属性用于限定可接受的文件类型 -->
+    <input type="file" name="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required/>
+    <button type="submit">upload</button>
+</form>
+</div>
+<div class="file-list">
+ <h2>choose a file from the navigation path</h2>
+    <div th:each="item : ${filelist}">
+        <a href="javascript:void(0)" target="_blank" th:data-filename="${item[0]}"  th:data-uid="${item[1]}"   onclick="openfile(this)">
+            <em th:text="${item[0]}"></em>
+        </a><br />
+    </div>
+ </div>
+    <footer class="border-top footer text-muted">
+        <div class="container">
+            © 2025 - Aspose
+        </div>
+    </footer>
+</body>
+</html>

package/example/wb/Sales Report.xlsx ADDED Viewed

Binary file

package/example/wb/SampleFile2.xlsx ADDED Viewed

Binary file

package/example/wb/TextBoxExample.xlsx ADDED Viewed

Binary file

package/example/wb/chart.xlsx ADDED Viewed

Binary file

package/example/wb/controls.xlsx ADDED Viewed

Binary file