任务六制作表格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

七 创建图像幻灯片

八 表格验证

您的项目需求

七创建图像幻灯片

八表格验证