任務六制作表格2

、在桌面新建文件夾，取名為你的姓名，之后所有的操作都在此文件夾中，收集作業只收集此文件夾

2、制作一個網頁。要求如下

1）網頁標題為 HTML5制作表格

2）網頁顯示如下圖

preadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

SpreadJS支持Vue----一個JavaScript框架，該框架為開發人員提供了不同的工具，以幫助他們構建復雜的用戶界面和Web應用程序。

SpreadJS可以通過以下兩種方式與Vue一起使用：

使用節點包管理器
使用傳統HTML

使用節點包管理器

此方法涉及以下步驟：

創建一個Vue項目打開命令提示符窗口，然后鍵入以下命令，以使用vue init webpack創建一個簡單的Vue項目。$ npm install --global vue-cli# create a new project using the "webpack" template
$ vue init webpack my-project# install dependencies and go!
$ cd my-project
$ npm run dev完成后，將在目錄中的指定位置創建Vue項目。
在項目中導入SpreadJS Vue模塊接下來，您需要使用以下命令在項目中安裝@ grapecity / spread-sheets-vue：$ npm install @grapecity/spread-sheets-vue
在Vue應用程序中使用SpreadJS現在，您可以根據需要修改App.vue文件。刷新瀏覽器窗口時，更改將反映出來。例如，您可以使用下面給出的示例代碼：

                            <template>
  <div>
      <gc-spread-sheets
        :hostClass='hostClass'
      >
        <gc-worksheet
          :dataSource="dataTable"
          :autoGenerateColumns='autoGenerateColumns'
        >
          <gc-column
            :width="width"
            :dataField="'price'"
            :visible='visible'
            :formatter='formatter'
            :resizable='resizable'
          ></gc-column>
        </gc-worksheet>
      </gc-spread-sheets>
  </div>
</template>
<script>
  import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  import  '@grapecity/spread-sheets-vue'
  export default {
    data(){
      return {
        hostClass:'spread-host',
        autoGenerateColumns:true,
        width:300,
        visible:true,
        resizable:true,
        formatter:"$ #.00"
      }
    },
    computed:{
      dataTable(){
        let dataTable=[];
        for (let i=0; i < 42; i++) {
          dataTable.push({price: i + 0.56})
        }
        return dataTable
      }
    }
  }
</script>
<style scoped>
.spread-host {
    width: 500px;
    height: 600px;
}
</style>

使用傳統HTML

此方法涉及以下步驟：

創建一個HTML頁面第一步，您需要創建一個HTML頁面。
將SpreadJS和Vue-SpreadJS添加到HTML模板在HTML模板中（即您的index.html文件）添加對gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js 文件的引用。
在Vue應用程序中使用SpreadJS現在，您可以在Vue應用程序中使用SpreadJS。例如，您可以使用下面給出的示例代碼：

                            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello SpreadJS Vue</title>
    <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
    <style>
        #app{
            width: 100%;
            height:100%;
        }
        .vue-demo{
            width: 800px;
            height:400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
 <app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template">
     <div>
        <gc-spread-sheets
          v-bind:hostClass='hostClass'
          @workbookInitialized='spreadInitHandle'
        >
            <gc-worksheet  >
            </gc-worksheet>
        </gc-spread-sheets>
     </div>
</script>
<script type="text/javascript">
    window.onload=function () {
        Vue.component('app', {
            template: '#app-template',
            data:function () {
                return {
                    hostClass: "vue-demo"
                }
            },
            methods: {
                spreadInitHandle: function (spread) {
                    window.mySpread=spread;
                    console.log('now you can also get spread from window');
                }
            }
        });
        new Vue({
            el:"#app",
        })
    }
</script>
</body>
</html>

SpreadSheets，Worksheet和Column是具有標簽層次結構的基本元素。其他元素通過設置來起作用。主要標簽層次為：

<gc-spread-sheets>
<gc-worksheet>
<gc-column> </ gc-column>
...
</ gc-worksheet>
...
</ gc-spread-sheets>

今天的內容就到這了，不要忘了在評論區留下的意見和建議！點擊了解更多！獲取最新資訊以及試用特權

Events

你可以編寫事件觸發執行的javascript代碼,例如用戶單擊html元素,移動鼠標或提交表單時

當目標元素發生事件時,執行處理函數

html常用的事件:

屬性此事件何時發生

onabort 圖像的加載被中斷

onblur 元素失去焦點

onchange 域的內容被改變

onclick 當用戶點擊某個對象時調用的事件句柄

onerror 在加載文檔或圖像時發生錯誤

onfocus 元素獲得焦點

onkeydown某個鍵盤按鍵被按下

onkeypress 某個鍵盤按鍵被按下并松開

onkeyup 某個鍵盤按鍵被松開

onload 一張頁面或一幅圖像完成加載

onmousedown 鼠標按鈕被按下

onmousemove 鼠標被移動

onmouseout 鼠標從某元素移開

onmouseover鼠標移動到某元素之上

onmouseup 鼠標按鍵被松開

onreset 重置按鍵被點擊

onresize 窗口或框架被重新調整大小

onselect 文本被選中

onsubmit 確認按鈕被點擊

onunload 用戶退出頁面

相應的事件可以添加到html元素作為屬性

例如:

<p onclick="someFunc()">點擊的文字</p>

事件發生時執行的函數的類型是事件處理程序(event )

function show(){

alert("英雄的黎明!"); }

</script>

效果如下:

可以給元素綁定事件監聽:

var x=document.getElementById("demo");

x.onclick=function(){

document.body.innerHTML=Date(); }

當用戶進入或離開頁面時,觸發onload和onunload事件,在頁面加載后執行操作時,這些操作非常有用

類似地,window.onload事件可以用于在整個頁面加載之后運行代碼

window.onload=function(){

// 代碼塊 }

onchange事件主要用于文本框.當文本框內的文本發生變化并且失去焦點從元素中丟失時,調用事件處理程序.

例如:

function change(){

var x=document.getElementById("name");

x.value=x.value.toUpperCase();

}

</script>

效果如下:

當輸入完英文后,按回車字母自動變為大寫字母

事件監聽

addEventListener()方法將事件處理程序附加到元素,而不會覆蓋現有的事件處理程序.你可以向一個元素添加許多事件處理程序.

你可以將許多同一類型的事件處理程序添加到一個元素.即兩個點擊事件.

element.addEventListener(event,function[,useCapture]);

第一個參數event代表事件的類型(如點擊,或鼠標按下)

第二個參數是事件發生時要調用的函數.

第三個參數是一個布爾值,指定是否使用事件冒泡或事件捕獲.此參數是可選的.

提示:在添加事件類型的時候,沒有on 如:click,而不是onclick

element.addEventListener("click",myFunction);

element.addEventListener("mouseover",myFunction);

function myFunction(){

alert("19954601618"); }

這會向元素添加兩個事件偵聽器.

我們可以刪除其中一個監聽器:

element.removeEventListener("mouseover",myFunction);

我們創建一個事件處理程序,在執行后會自動刪除.

var btn=document.getElementById("demo");

btn.addEventListener("click",myFunction);

function myFunction(){

alert(Math.random());

btn.removeEventListener("click",myFunction);

}

</script>

效果如下:

單擊按鈕后,將顯示帶有隨機數的報警,并刪除事件偵聽器

提示:IE版本8及更低版本不支持addEventListener()和removeEventListener()方法.但是,可以使用document.attachEvent()方法在IE中附加事件處理程序.

七創建圖像幻燈片

我們可以創建一個示例圖像幻燈片項目,將使用"下一個"和"上一個"按鈕更改圖像.

現在,我們來創建html,其中包括一個圖像和兩個導航按鈕:

<div>

</div>

接下來,在數組中定義我們的示例圖像:

var images=["1.jpg","2.jpg","3.jpg"];

現在我們需要處理"上一個"和"下一個"按鈕點擊并調用相應的功能來更改圖像.

html:

<div>

js:

var images=["1.jpg","2.jpg","3.jpg"];

var num=0;

function next(){

var slider=document.getElementById("slider");

num++;

if(num>=images.length){

num=0; }

slider.src=images[num];

}

function pre(){

var slider=document.getElementById("slider");

num--;

if(num<0){

num=images.length-1;

}

slider.src=images[num];

}

效果如下:

提示:num變量保存當前圖像的.下一個和上一個按鈕點擊由他們相應的功能來處理,這些功能會將圖像的源更改為數組中的下一個/上一個圖像.

八表格驗證

html5添加了一些允許表單驗證的屬性.例如,require屬性可以添加到輸入字段,以使其強制填寫.

更復雜的表單驗證可以使用javascript來完成.

表單元素具有可以處理以執行驗證的onsubmit事件.

例如,我們創建一個帶有兩個輸入框和一個按鈕的窗體.兩個字段中的文本應該相同.不能為空,才可通過驗證.

Number:<input type="text" name="num1" id="num1" />

<br/>

Repeat:<input type="text" name="num2" id="num2"/>

<br/>

</form>

現在我們需要定義validate()函數:

function validate(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

if(n1.value!=""&&n2.value!=""){

if(n1.value==n2.value){

return true; }

}

alert("輸入兩個值不相等,請重新輸入");

return false;

}

只有當兩個不為空且相等時才返回true.

提示:如果其onsubmit事件返回false,表單將不會提交.

javascript基本教程到處就結束了.恭喜你已經入門了!

在線咨詢

上一篇：用函數實現郵件的發送
下一篇：企業表格技術應用實踐：自定制表格編輯器（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

任務六制作表格2

Events

七 創建圖像幻燈片

八 表格驗證

您的項目需求

七創建圖像幻燈片

八表格驗證