纯干货分享: 如何在 react 框架中使用spreadjs -买球官网平台

..." />

1顶
0踩

首先,我们需要在页面中添加对react的引用:

    
    <html>
    <head>
        <meta charset="utf-8" />
        <title>spreadjs react demotitle>
        <script src="https://unpkg.com/[email protected]/umd/react.development.js">script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js">script>
    head>
    html>
    

在这个页面中,我们将使用babel的预编译版本(称为babel-standalone),因此我们也会添加一个对此的引用:

<script src="https://unpkg.com/[email protected]/babel.min.js">script>

最后,添加对spread.sheets的引用:

    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js">script>
    <link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">

在我们编写任何脚本之前,我们需要定义一个div元素来包含spread实例。我们称之为“root”。

    <div id="root">div>

第2步:为spread.sheets创建一个react类

接下来,在页面中添加一个脚本元素。我们将把所有的代码放在这里:

    <script type="text/babel">script>

然后,为spread.sheets定义一个react组件,以便我们可以定义一个扩展react.component的类:

    class reactspreadjs extends react.component{
    }

该类需要在其中定义componentdidmount和render函数。componentdidmount函数在组件被挂载后立即被调用,所以我们用它来初始化spread实例:

    componentdidmount() {
        //in the didmount life cycle, we initialize spread sheet instance, and the host is defined in the component template.
        let spread = new gc.spread.sheets.workbook(this.refs.spreadjs, {sheetcount: 3});
    
        if(this.props.workbookinitialized){
            this.props.workbookinitialized(spread);
        }
    }

接下来,在渲染函数中定义spread.sheets dom元素:

    render() {
        //define the spread.sheets dom template
        return(
            
"spreadjs" style={{width:'100%',height:'100%'}}>
); }

第3步:为组件创建一个应用程序类

首先,通过app类定义应用程序react组件:

    //define the application react component.
    class app extends react.component{
    }

接下来,添加一个您将调用reactspreadjs组件的渲染函数:

    render(){
        //in the root component, it include one reactspreadjs component.
        return(
                <div style={{width:'800px',height:'600px'}}>
                    <reactspreadjs workbookinitialized = {(spread)=>{console.log(spread)}}>
    
                    reactspreadjs>
                div>
        )
    }

要完成脚本,请告诉react通过使用reactdom.render来初始化应用程序:

    reactdom.render(
        //main entry, initialize application react component.
            ,
        document.getelementbyid('root')
    );

这就是使用react将spread.sheets添加到html页面所需的全部内容。这只是react和spread.sheets的基本使用,但可以轻松扩展。

spreadjs下载链接:

spreadjs买球官网平台官网链接:


关于spreadjs前端表格控件

spreadjs 纯前端表格控件是基于 html5 的 javascript 电子表格和网格功能控件,适用于.net、java 、web应用程序、移动端等多种平台的表格数据处理和类excel功能的表格程序开发。全中文操作界面,零学习成本!便于您在系统开发过程中,更安全的管理excel 数据,更快捷的完成海量数据交互,更方便的进行数据导出、导入、排序、过滤、增删改查、可视化及excel 导入/导出等操作。spreadjs自面世以来,备受华为、中通、中国民航飞行学院、中国平安 、中国能建、浪潮等国内知名企业客户青睐。

1
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 转载请注明出处:葡萄城买球官网平台官网,葡萄城为开发者提供专业的开发工具、...如今,企业开始纷纷尝试信息化转型,前端、后端、中台、云,这些概念也逐渐变得家喻户晓,在几乎所有的b端产品中,表格都作为一种交互式组件受到

  • 在上篇中,笔者分享了部分安装并调试react native应用过程里的一点经验,如果还没有看过的同学请点击《react native基础&amp;入门教程:调试react native应用的一小步》。在本篇里,让我们一起来了解一下,什么...

  • react native(以下简称rn)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去debug移动端的代码,无疑是最吸引开发人员的特性之一。试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以...

  • 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579083d1c9da73584b02587d最近一个季度,我们都在为手q家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌...

  • 最近一个季度,我们都在为手q家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用react 进行重构。选择react,其实也主要是因为它具有下面的三大特性。 react的特性 1.lea...

global site tag (gtag.js) - google analytics