dhtmlxSpreadSheet是用纯JavaScript编写的开源电子表格小部件，可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件，具有优雅的Material样式，可安全、方便地编辑和格式化数据。

本指南将为您提供有关如何在页面上创建dhtmlxSpreadSheet的详细说明，以利用强大的工作表功能丰富您的应用程序。请按照以下步骤获取可立即使用的组件：

  1. 在页面上包含dhtmlxSpreadSheet源文件。
  2. 为dhtmlxSpreadSheet创建一个容器。
  3. 使用对象构造函数初始化dhtmlxSpreadSheet。
<!DOCTYPE html>

<html>

    <head>

        <title>How to Start with dhtmlxSpreadSheet</title>

        <script type="text/javascript" src="/codebase/spreadsheet.js"></script>

        <link rel="stylesheet" type="text/css" href="/codebase/spreadsheet.css">

    </head>

    <body>

        <div id="spreadsheet"></div>

        <script>

            // creating dhtmlxSpreadSheet

            var spreadsheet = new dhx.SpreadSheet("spreadsheet",{document.body});

        </script>

    </body>

</html>

包括源文件

下载安装包并将其解压缩到项目的文件夹中。

要创建dhtmlxSpreadSheet，您需要在页面上包括2个源文件：

  • spreadsheet.js
  • spreadsheet.css

确保为这些文件设置正确的相对路径：

<script type="text/javascript" src="codebase/spreadsheet.js"></script>

<link rel="stylesheet" href="codebase/spreadsheet.css">

SpreadSheet包的结构如下：

  • sources-库的源代码文件；它们易于阅读，主要用于调试；
  • 代码库-库的混淆代码文件；它们体积小得多，可用于生产。准备好将这些文件包括在您的应用程序中；
  • 样本-代码样本；
  • docs-组件的完整文档。

创建容器

为SpreadSheet添加一个容器并为其指定一个ID，例如“ ssheet”：

<div id="ssheet"></div>

初始化dhtmlxSpreadSheet

使用dhx.Spreadsheet对象构造函数初始化dhtmlxSpreadSheet 。构造函数有两个参数：

  • 电子表格的HTML容器
  • 具有配置属性的对象
// creating dhtmlxSpreadSheet

var ssheet = new dhx.Spreadsheet("ssheet", {// config options});

配置属性

这是可以在SpreadSheet配置对象中指定的属性列表：

  • toolbarBlocks-（数组）指定将在电子表格的工具栏中显示的按钮块
  • editLine-（boolean）隐藏/显示编辑栏
  • menu-（布尔值）隐藏/显示菜单
  • colsCount-（number）设置电子表格初始化时将具有的列数
  • rowsCount-（number）设置电子表格在初始化时将具有的行数
  • readonly-（boolean）启用/禁用只读模式
  • exportModulePath-（字符串）设置导出模块的路径
  • importModulePath-（字符串）设置导入模块的路径
  • autoFormat-（boolean）定义是否自动检测单元格内容的格式
  • 格式-（数组）定义数字格式列表

您可以在初始化期间将配置选项设置为构造函数的第二个参数：

var ssheet = new dhx.Spreadsheet("ssheet", {

    rowsCount:10,

    colsCount:10

});

dhtmlxSpreadSheet开源电子表格小部件创建教程的更多相关文章

  1. yii YII小部件 创建登录表单表单 Login表单

    YII框架必须遵循其表单的创建方法 登录模型错做与数据库操作模型是一致的,不同的是不跟数据库交互 ,用的是小部件,在创建表单之前,要在用户控制模块完成以下代码 protected --models - ...

  2. Android简易实战教程--第十四话《模仿金山助手创建桌面Widget小部件》

    打开谷歌api,对widget小部件做如下说明: App Widgets are miniature application views that can be embedded in otherap ...

  3. 实例甜点 Unreal Engine 4迷你教程(1)之如何用C++将纹理绘制在UserWidget的Image小部件上

    完成本迷你教程之前,请前往完成以下迷你教程: 无前置教程待完成. 本教程适合的人群: 初学者,具有开发经验两周: 本示例的目的:为了在代码中实现UMG中的这个功能: 说明:这是一些列迷你教程的首篇,所 ...

  4. 教你在Yii2.0框架中如何创建自定义小部件

    本教程将帮助您创建自己的自定义小部件在 yii framework 2.0.部件是可重用的模块和用于视图. 创建一个小部件,需要继承 yii\base\Widget,覆盖重写 yii\base\Wid ...

  5. ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）

    1.     鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...

  6. 实例甜点 Unreal Engine 4迷你教程(3)之用C++改变Image小部件的其它属性

    完成本迷你教程之前,请前往完成以下迷你教程: ·实例甜点 Unreal Engine 4迷你教程(2)之用C++改变Image小部件的颜色: 在上一次的迷你教程的LearnWidgets工程上进行(如 ...

  7. 实例甜点 Unreal Engine 4迷你教程(2)之用C++改变Image小部件的颜色

    完成本迷你教程之前,请前往完成以下迷你教程: ·实例甜点 Unreal Engine 4迷你教程之如何用C++将纹理绘制在UserWidget的Image小部件上: 目标:实现UMG中的此功能: 在上 ...

  8. Kendo UI for jQuery使用教程：小部件DOM元素结构

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. 微信小程序开发教程

    9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样 ...

随机推荐

  1. spring mvc(3) DispatcherServlet

    通过前面的例子,我们实现了spring mvc模式,那么在spring mvc模式下请求是如何被执行最终返回页面的呢? 从服务器收到请求开始,执行流程如下: 1.服务器接收请求,根据web.xml的配 ...

  2. javaweb开发中的常见错误

    Javaweb中的最常见错误及其解决方法 1.200:表示成功处理业务. 2.400 请求出错: 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就 无法重复此请求. 解决办法:,遇到400 ...

  3. ThreadLocal源码分析与实践

    ThreadLocal是什么? ThreadLocal是一个线程内部存储类,提供线程内部存储功能,在一个ThreadLocal对象中,每一个线程都存储各自独立的数据,互不干扰 示例如下: public ...

  4. MySQL分区 (分区介绍与实际使用)

    分区介绍: 一.什么是分区? 所谓分区,就是将一个表分成多个区块进行操作和保存,从而降低每次操作的数据,提高性能.而对于应用来说则是透明的,从逻辑上看只有一张表,但在物理上这个表可能是由多个物理分区组 ...

  5. 简单渗透测试流程演示（445端口、IPC$、灰鸽子）

    目录 一.实验流程 二.实验过程 2.1 信息收集 2.2 利用过程 2.3 暴力破解系统密码之445 2.4 通过木马留后门 一.实验流程 0.授权(对方同意被渗透测试才是合法的.)1.信息收集  ...

  6. 基于mockito做有效的单元测试

    概述 本文讲解的主要是有效和单元的思想,并不是说如何编写单元测试,用于改善和提高开发效率.编码风格.编码可读性和单测效率,不盲目追求覆盖率. 背景 现在很多单元测试只是利用@Test注解把代码或者整个 ...

  7. FastDFS 分布式文件系统详解

    什么是文件系统 文件系统是操作系统用于在磁盘或分区上组织文件的方法和数据结构.磁盘空间是什么样的我们并不清楚,但文件系统可以给我们呈现一个非常清晰的表象,我们可以创建.删除.修改和复制这些文件,而实现 ...

  8. ESD(静电释放)上半部分

    ESD(静电释放)上半部分 ESD:Electro-Static discharge静电释放 1.ESD静电释放的模式 1.1 人体放电模式(human body mode) 人体会释放静电,那么人体 ...

  9. 关于C++的右值引用的一些看法

    简介 关于C++中的右值引用的详细可以看这一批博文<从4行代码看右值引用>.那一篇博文详细结合四行简单的代码详细介绍了右值引用的使用方法和一些场景,非常实用. 而本篇博文主要介绍一下我在学 ...

  10. 034 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 01 流程控制概述

    034 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 01 流程控制概述 本文知识点:Java中的流程控制相关概念的认识 三大流程控制语句结构的简介 顺序 ...