精华内容
下载资源
问答
  • vue表格编辑实例

    2018-06-15 13:40:05
    这是一个基于vue2.0的表格编辑实例,下载下来在浏览器打开,可以看到效果,编辑器打开可以看到源码,源码清晰明了
  • 引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在... npm install -S xlsx 电子表格格式的解析 npm install -D script-loader 将js挂在在全局下 表结构 渲染页面中的表结构是由 columns 列 和 table
  • 用VB打造自己的Excel表格编辑器,用VB仿Excel,源代码
  • 适用于Vue的可编辑表格组件,支持多种快捷键操作,模拟Excel的操作体验
  • 如果高度小于23px,则表格呈现不正确。 默认值:undefined // as a number, the same for all rows rowHeights: 100, // as a string, the same for all row rowHeights: '100px', // as an array, based on ...

    handsontable官网地址:https://handsontable.com/docs/7.1.0/tutorial-custom-build.html

    1.安装

    npm install handsontable @handsontable/vue

     

    2.引入css,

    方式1 
    在app.vue中引入 
    <style src="../node_modules/handsontable/dist/handsontable.full.css"></style> 
    方式2 
    在main.js中引入 
    import 'handsontable/dist/handsontable.full.css';
    方式3
    在vue组件中引入 
    <style> @import '~handsontable/dist/handsontable.full.css'; </style>

     

    3.添加License key,去掉提示文字

    <hot-table :settings="settings" licenseKey="non-commercial-and-evaluation" />
    <script>
      import {HotTable} from '@handsontable/vue';
      import Handsontable from 'handsontable';
    
      export default {
        name: 'HelloWorld',
        data() {
          return {
            hotSettings: {
              data: Handsontable.helper.createSpreadsheetData(6, 10),
              colHeaders: true,
              colHeaders: true,
            }
          }
        },
       components: {
         HotTable
       }
    
      }
    </script>

    4.传递数据方式

    方式1:
    <hot-table :settings="hotSettings" />
    setting:子组件接收数据属性
    
    方式2:
    <hot-table
          :settings="hotSettings"
          licenseKey="non-commercial-and-evaluation"
          :data="tableData"
          style="height:300px;overflow:auto;"
        >
        </hot-table>
    
    
    <script>
      data() {
        return {
          hotSettings: {
            tableClassName: ['table01', 'htCenter'],
            stretchH: 'all',
            preventOverflow: 'vertical', //防止水平溢出表 
               },
            data:''//你的对象数组或者二维数组,可以使用计算属性给其赋值等
             }
          },
    </script>
    

    5.设置行.列表头显示

    //默认行列头部 
    colHeaders: true,rowHeaders: true,
    
     //自定义行列头部 
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    
    //对象数组头部设置
    dataSchema: {//预定义对象属性
              car: null,
              year: null,
              chassisColor: null,
              bumperColor: null
            },
            colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],//也可以为汉字
            columns: [//对象属性与预定义属性对应
              { data: 'car', readOnly: true },
              { data: 'year', readOnly: true },
              { data: 'chassisColor', readOnly: true },
              { data: 'bumperColor', readOnly: true }
            ]

    6.创建多种数据初始化列表

    方法
    createEmptySpreadsheetData(rows: number, columns: number): any[],
    createObjectPropListener(defaultValue?: any, propertyToListen?: string): object,
    createSpreadsheetData(rows?: number, columns?: number): any[],
    createSpreadsheetObjectData(rows?: number, colCount?: number): any[],
    使用
    import Handsontable from 'handsontable';
    data: Handsontable.helper.createEmptySpreadsheetData(10, 10),

    7.设置表格最大行数和列数

    maxCols:10, maxRows:10,

    8.右键菜单

    开启右键菜单
    contextMenu:true,
    
    自定义右键菜单
     contextMenu:['row_above', 'row_below', 'remove_row']

    9.添加新的行(利用方法)

    <el-button @click="addNewRow()">添加新的行</el-button>
    
    //添加新的行
    addNewRow() {
      const self = this;
      self.hotSettings.data = self.hotSettings.data.concat([[]]);
      self.$refs.hotTableComponent.hotInstance.loadData(self.hotSettings.data);
    },

    10.切换只读默认

    全表只读模式
    <el-checkbox v-model="checked" label="是否只读" @change="toggleReadOnly"></el-checkbox>
    //只读模式
    toggleReadOnly(val) {
      const self = this;
      self.hotSettings.readOnly = val;
    }
    
    
    列只读模式(对象数组)
    columns: [
              { data: 'car', readOnly: true },
              { data: 'year', readOnly: true },
              { data: 'chassisColor', readOnly: true },
              { data: 'bumperColor', readOnly: true }
            ]
    
    列只读模式(二维数组)
    /...待续.../
    
    
    单元格只读模式
    
    <el-checkbox v-model="checked" label="是否只读" @change="toggleReadOnly"></el-checkbox>
    <HotTable :language="language" :settings="hotSettings" licenseKey="non-commercial-and-evaluation" ref="hotTableComponent">
    </HotTable>
    调用
    toggleReadOnly(val) {
      const self = this;
      // self.hotSettings.readOnly = val;
      let hot = self.$refs.hotTableComponent.hotInstance;
      hot.updateSettings({
        cells: function (row, col) {
          var cellProperties = {};
          if (hot.getData()[row][col] === 'Nissan') {
            cellProperties.readOnly = true;
          }
          return cellProperties;
        }
      })
    },
    部分列为只读模式

     

     

    12.语言国际化

    引入语言包
    import 'handsontable/languages/zh-CN';
    使用
    <HotTable :language="language" :settings="hotSettings" licenseKey="non-commercial-and-evaluation"
              ref="hotTableComponent">
    </HotTable>
    hotSettings: {
        //创建空的数据excel
        data: Handsontable.helper.createSpreadsheetData(10, 10),
        colHeaders: true,
        rowHeaders: true,
        //header 内容过长提示
        headerTooltips: true,
        //添加 License key
        licenseKey: 'non-commercial-and-evaluation',
        //最大列
        maxCols: 10,
        //最大行
        // maxRows: 10,
        //只读模式
        readOnly: false,
        //启用公式库
        formulas: true,
        //右键菜单问题
        contextMenu: ['row_above', 'row_below', 'remove_row']
      },
      //语言设置
      language: 'zh-CN'
    }

    13.公式的使用

    //启用公式库
    formulas: true,
    /** 
     支持的公式:
     任何数字,负数和正数,如浮点数或整数;
     算术运算,如:+,-,/,*,%,^,
     逻辑操作如:AND(),OR(),NOT(),XOR(),
     比较操作,如:=,>,>=,<,<=,<>;
     所有的JavaScript数学常量,如:PI(),E(),LN10(),LN2(),LOG10E(),LOG2E(),SQRT1_2(),SQRT2(),
    错误处理:#DIV/0!,#ERROR!,#VALUE!,#REF!,#NAME?,#N/A,#NUM!,
    字符串操作如:( &连接eq。=-(2&5)将返回-25);
    公式中定义的所有excel 公式 ;
    相对和绝对单元格引用,如:A1,$A1,A$1,$A$1,
    内建变量,如:TRUE,FALSE,NULL,
    自定义变量;
    嵌套函数;
    动态更新。
    **/
    公式使用图解

     

    15。设置单元格背景色(通过backgroundclolor,在修改别的单元格的时候,颜色会被迁移和覆盖)

    toggleReadOnly(val) {
      const self = this;
      // self.hotSettings.readOnly = val;
      let hot = self.$refs.hotTableComponent.hotInstance;
      hot.updateSettings({
    
        cells: function (row, col) {
          if (row==0){
            //设置单元格背景色
            let cell = hot.getCell(row, col);
            cell.style.background = "#00FF90";
          }
        }
      });

    16.设置行高,列宽

    rowHeights,colWidths 
    
    以像素为单位定义行高。接受数字,字符串(将转换为数字),数字数组
    (如果要分别为每行定义行高)或函数(如果要
    在每个渲染上动态设置行高)。(Number Array。<Number> String Array。<String>)
    如果启用了插件ManualRowResize或AutoRowSize插件,这也是可
    通过这两个插件中的任何一个设置的最小高度。
    高度应等于或大于23px。如果高度小于23px,则表格呈现不正确。
    默认值:undefined
    
    // as a number, the same for all rows
    rowHeights: 100,
    
    // as a string, the same for all row
    rowHeights: '100px',
    
    // as an array, based on visual indexes. The rest of the rows have a default height
    rowHeights: [100, 120, 90],
    
    // as a function, based on visual indexes
    rowHeights: function(index) {
      return index * 10;
    },

    17.设置文字居中

    要使用预定义的水平和垂直对齐方式初始化Handsontable,请以网格columns或cell设置的形式提供className单元格详细信息(请参阅下面的代码示例)。
    可用的classNames:
    水平:htLeft,htCenter,htRight,htJustify,
    垂直:htTop,htMiddle,htBottom。
    可以使用afterSetCellMeta钩子回调来跟踪对齐更改
    例子:
    //整个表格文字设置
    className: "htCenter",
    单元格文字设置:
      cell: [
        {row: 0, col: 0, className: "htRight"},
        {row: 1, col: 1, className: "htLeft htMiddle"},
        {row: 3, col: 4, className: "htLeft htBottom"}
      ],

    18.多表头格式

    nestedHeaders: [
      ['A', {label: 'B', colspan: 8}, 'C'],
      ['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
      ['H', 'I', 'J', 'K', 'L', 'M', 'N', 'R', 'S', 'T']
    ],

    19.修改文字改变文字所在单元格的样式

     //修改文字改变改单元格样式
            afterChange: function(changes, source) {
              if (source == 'edit') {
                console.log(changes);
                changes.forEach(([row, prop, oldValue, newValue]) => {
                  //this 表示当前的handsontable对象
                  let cell = this.getCell(row, prop);
                  cell.style.background = 'lavender';
                });
              }
            }

    20.监听单元格内容修改事件

    mounted() {
      const self = this;
      self.customCellStyle();
      //监听改变单元格内容事件
      Handsontable.hooks.add("afterChange",function (result) {
        
      })
    },

    22.单元格渲染

    数组
    
    Handsontable.hooks.add("afterChange", function (changes, source) {
      if (source === 'edit') {
        changes.forEach(([row, prop, oldValue, newValue]) => {
          if (newValue !== oldValue && row > 0 && prop < 9) {
            //设置单元格背景色
            const className = this.getCellMeta(row, prop).className;
            //移除之前的表格样式
            if(className && className.lastIndexOf('selected-td') > 0){
              const index = className.indexOf('selected-td');
              this.setCellMeta(row, prop, 'className', className.substring(0, index) + className.substring(index+1, className.length));
            }else{
                 //多个样式之间用空格隔开
            this.setCellMeta(row, prop, 'className', this.getCellMeta(row, prop).className + ' selected-td');
            //设置单元格公式
            }
           
    
          }
        })
      }
      //渲染表格
      this.render();
    })
    
    <style>
    //selected-td 的父级必须为.handsontable
    .handsontable .selected-td {
      background-color: red;
    }
    </style>
    
    
    对象
    //设置单元格背景色
    Handsontable.hooks.add("afterChange", function (changes, source) {
      if (source === 'edit') {
        changes.forEach(([row, prop, oldValue, newValue]) => {
    if(newValue!==oldValue){
              const obj = this.getCellMetaAtRow(row).find(
                v => v.row === row && v.prop === prop
              );
              const className = this.getCellMeta(row, obj.col).className;
              //移除之前的表格样式
              if (className && className.lastIndexOf('selected-td') > 0) {
                const index = className.indexOf('selected-td');
                this.setCellMeta(
                  row,
                  obj.col,
                  'className',
                  className.substring(0, index) +
                    className.substring(index + 1, className.length)
                );
                //多个样式之间用空格隔开
                this.setCellMeta(
                  row,
                  obj.col,
                  'className',
                  this.getCellMeta(row, prop).className + ' selected-td'
                );
              } else {
                //多个样式之间用空格隔开
                this.setCellMeta(
                  row,
                  obj.col,
                  'className',
                  this.getCellMeta(row, prop).className + ' selected-td'
                );
              }
    })
    }
    })
    

     

     

    展开全文
  • 葡萄城控件支持在所有主流技术平台,包括 .NET、HTML5、IOS、Android 等,全面满足开发人员在 UI 界面、表格设计、数据处理等方面的需求,有效帮助开发人员提高效率,缩短项目周期,使开发人员能更专注于业务逻辑,...
  • 在csdn markdown编辑器中想使用表格是不是有点手足无措… 别急… marketdown表格在线制作网站: http://www.ituring.com.cn/article/3452 http://pressbin.com/tools/excel_to_html_table/index.html实际上原来...

    在csdn markdown编辑器中想使用表格是不是有点手足无措…
    别急…
    marketdown表格在线制作网站:
    http://pressbin.com/tools/excel_to_html_table/index.html

    实际上原来我是用dreamweaver的,现在的电脑上没装…,又不想打html标签…

    展开全文
  • 主要为大家详细介绍了Vue.js实现可编辑表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • python处理excel表格数据 方法一 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 excel表格数据筛选功能 ...
  • 因为项目需要,发现直接从...这里从word,以及excel粘贴复制,都能直接有边框了,同时在编辑器里面新增表格,也能直接显示边框了,不需要右键-->设置显示边框了 我这里是使用在禅道上的,这里就直接给出已经修改的js
  • react在线编辑Excel表格

    2020-12-01 17:32:15
    效果如上图, 引用:SpreadJS 下载 react例子 运行后如图

    效果如上图,

    引用:SpreadJS

    下载

    react例子

    运行后如图

    展开全文
  • java写的excel编辑器,界面令人惊叹!

    热门讨论 2010-10-06 11:07:58
    java写的excel编辑器,应该要装java才能用(我是电脑必装,所以没测试这了),双击run.bat傻瓜式运行咯~
  • 用C++写的excel表格生成功能(功能齐全)
  • Vue 富文本编辑器 wangEditor JMEditor vue-quill-editor vue2-editor simditor kindeditor ueditor tinymce ckeditor wangeditor suneditor froala SpreadJS 产品文档 Unicode 字符百科 vue项目插件链接合集
    展开全文
  • vue 在线编辑表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template> <div> <!-- 用组件写的编辑表格 --> <el-table border :data="tableData" style="width: 100%...
  • office2016无法打开新建的Excel表格,但是能打开以前的,解决办法如下 百度了很多说是模板问题,里面好多解决办法和我的注册表目录不一样,试了很多方法都不行 以下是我自己的方法,亲测有效 我的电脑是win10专业版...
  • 是的,在一个界面上同时展示可视化表格与代码,而且同时通过表格与代码修改数据,这不就是 Python 与 Excel 的结合吗?项目地址:https://github.com/ricklamers/gridstudio我们先看看 Grid studio 的效果到底是什么...
  • 如果在打开编辑器的同时对源文件(.csv)进行了更改,则不会更新编辑器! 重要笔记 ! 初始加载时,所有行都会展开,以使所有行都具有相等的长度(像元数(如有必要)) 如果发生这种情况,您将从开始就可以看到...
  • 类似于Excel表格控件,可以实现编辑Table中的内容,添加行、删除行、合并单元格等功能。
  • 之前做导出表格时,发现只能在编辑器状态下实现,现在可以导出且可以拉起windows的窗口交互,算是完整了,就记录下。 首先,要用到Epplus这个dll https://archive.codeplex.com/?p=epplus 下载导入后,再根据当前你...
  • 本章主要内容:Excel简介,Excel的基本概念及操作,简单小工具
  • 表格编辑器

    2012-01-12 13:38:46
    js代码让表格变得像Excel那样强大,可以添加,修改,删除表格还有右键功能
  • Unity表格配置编辑工具

    千次阅读 2019-07-07 19:03:52
    游戏开发中表格配置是必有的功能,我们会将一些游戏数据配置在表格中,一般流程是Excel编辑数据,然后导出C#的Model类和Unity中可用的二进制或者json/xml数据等,但如果碰到要一个需求,策划想要频繁修改数据并且在...
  • Excel表格转化MYSQL表格

    2019-10-28 17:23:06
    Excel表格转化MYSQL表格 1. 新建转换文件 2.连接数据库 如出现如图所示即成功连接数据库 3.Excel输入 按如图所示操作即可,点击确定 4.表输出 如图操作,点击SQL,出现编辑器,点击执行 出现如图所示即可,点击...
  • Excel 鱼骨图 编辑器 鱼骨图生成工具 V2.5基于Microsoft Excel(电子表格)的免费下载版本。
  • 重要的 用于网络的轻量级电子表格编辑器,可轻松让您的用户从excel导入数据。 轻量级(压缩后不足5kb) 移动友好 复制粘贴 麻省理工学院执照 演示和文档: :
  • Vue实现在线编辑excel

    千次阅读 2021-07-01 09:10:34
    前言介绍:原先平台没有要求在线编辑excel功能,excel文件是表单新增记录展现表格信息的一条记录信息,用于展示excel文件名称,支持下载功能,后续可能是客户嫌弃文件下载网速过慢,所以要求支持在线预览和编辑功能...
  • 怎样用python处理Excel表格呢 不要方,雷哥教你。 一、理解 python与Excel表格 Excel 是 Windows 环境下流行的、强大的电子表格应用。openpyxl 模块让 Python 程序能读取和修改 Excel电子表格文件 (1)excel文档中...
  • 非常优秀在线EXCEL编辑器-handsontable

    万次阅读 2018-11-26 00:41:15
    Handsontable Community Edition (CE) 是一个开源的JavaScript电子表格组件,非常流行的web应用程序的UI组件,可用于 各种技术,如React、Angular和Vue,它很容易与任何数据源集成并提供了各种有用的功能,如数据...
  • vue 引入Excel表格插件

    千次阅读 2019-12-16 09:53:15
    this.$refs.hotTableComponent.hotInstance // 获取表格数据,调用表格方法, ****** 指向表格 getPlugin(‘MergeCells’).mergedCellsCollection.mergedCells) // 获取合并单元格之后需要的参数

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,548
精华内容 8,619
关键字:

怎么打开excel表格编辑器