V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

纯前端表格控件 SpreadJS,全面支持 Vue

  •  
  •   powertoolsteam · 2019-03-27 11:36:17 +08:00 · 1694 次点击
    这是一个创建于 2053 天前的主题,其中的信息可能已经有所发展或是发生改变。

    纯前端表格控件 SpreadJS 目前已经全面支持 Vue -- 一个 JavaScript 框架,为开发人员提供不同的工具,以帮助他们构建复杂的用户界面和 Web 应用程序。

    SpreadJS 可以通过以下两种方式与 Vue 一起使用:

    1. 使用 Nuget Package Manager(NPM)

    2. 使用传统 HTML

    使用 Nuget Package Manager(NPM)

    此方法包括以下步骤:

    1、 创建一个 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 项目。有关如何创建 Vue 项目的更多信息,请参阅 https://vuejs.org/v2/guide/installation.html。

    2、 在项目中导入 SpreadJS Vue 模块

    接下来,您需要使用以下命令在项目中安装 @ grapecity / spread-sheets-vue:

    $ npm install @ grapecity / spread-sheets-vue
    

    3、 在 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

    此方法包括以下步骤:

    1、 创建一个 HTML 页面

    作为第一步,您需要创建一个 HTML 页面。

    2、 将 SpreadJS 和 Vue-Spread.Sheets 添加到 HTML 模板

    添加对 gc.spread.sheets.all 。。min.js ,gc.spread.sheets。。css 和 gc.spread.sheets.vue 。。*的引用。HTML 模板中的 js 文件(即 index.html 文件)。

    3、 在 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>
    

    SpreadJS 中的 SpreadSheets,Worksheet 和 Column 是具有标记层次结构的基本元素。其他元素通过设置它们来工作。主标记层次结构是:

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

    SpreadJS | 下载试用

    纯前端表格控件 SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET 、Java、移动端等多个平台的类 Excel 数据开发,备受华为、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4783 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 03:59 · PVG 11:59 · LAX 19:59 · JFK 22:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.