dhtmlxSpreadSheet用户指南：如何在页面上创建dhtmlxSpreadSheet-控件新闻-慧都网

dhtmlxSpreadSheet用户指南：如何在页面上创建dhtmlxSpreadSheet

翻译|使用教程|编辑：杨鹏连|2020-10-13 10:22:54.793|阅读 244 次

概述：本指南将为您提供有关如何在页面上创建dhtmlxSpreadSheet的详细说明，以利用强大的工作表功能丰富您的应用程序。

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

点击下载dhtmlxSpreadsheet试用版

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

在页面上包含dhtmlxSpreadSheet源文件。
为dhtmlxSpreadSheet创建一个容器。
使用对象构造函数初始化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
});

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxSpreadSheet正版授权，或了解慧都APS系统请点击【咨询在线客服】

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：DHTMLX

上一篇：代码混淆系统Code Virtualizer操作详解：在Visual Basic本机中插入保护宏下一篇：jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView概述

在线采购

中文文档库

试用/Demo下载

开发社群