Handsontable - 配置属性(下)

简介: Handsontable - 配置属性(下)

11、右键菜单展示

contextMenu: true/false/自定义数组 // 当值为true时,启用右键菜单,为false时禁用

例如:contextMenu: ["row_above", "row_below", "col_left", "col_right", "remove_row", "remove_col", "---------", "undo", "redo", "Read Only", "alignment", "Merge Cells"]

12、自适应列大小

autoColumnSize: true/false // 当值为true且列宽未设置时,自适应列大小

13、minCols:最小列数

minRows:最小行数

minSpareCols:最小列空间,不足则添加空列

maxCols:最大列数

maxRows:最大行数

minSpareRows:最小行空间,不足则添加空行

14、observeChanges:true/false

// 当值为true时,启用observeChanges插件

15.colWidths:[列宽1,列宽2,...]/列宽值

// 例如
var hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  //colWidths: [100, 200, 300, 200, 100]
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    minSpareRows: 30,  
    cells: function(row, col, prop) {//单元格渲染  
            this.renderer = myRenderer;  
    },  
    mergeCells: true 
});

16、自定义边框设置,可以进行初始化配置,如下:

customBorders: [{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]

hot = Handsontable(container, {  
    data: Handsontable.helper.createSpreadsheetData(200, 20),  
    rowHeaders: true,  
    fixedColumnsLeft: 2,  
    fixedRowsTop: 2,  
    colHeaders: true,  
    customBorders: [  
      {  
        range: {//多个单元格  
          from: {//起始位置  
            row: 1,  
            col: 1  
          },  
          to: {  
            row: 3,  
            col: 4  
          }  
        },  
        top: {//结束位置  
          width: 2,  
          color: '#5292F7' 
        },  
        left: {  
          width: 2,  
          color: 'orange' 
        },  
        bottom: {  
          width: 2,  
          color: 'red' 
        },  
        right: {  
          width: 2,  
          color: 'magenta' 
        }  
      },  
      {//单一单元格  
        row: 2,  
        col: 2,  
        left: {  
          width: 2,  
          color: 'red' 
        },  
        right: {  
          width: 1,  
          color: 'green' 
        }  
      }]  
  });


也可以声明customBorder:true,表示允许自定义单元格边框。

用range指定一个范围,或者直接使用row、col指定单元格位置,用top、right、bottom、left分别设置单元格上下左右边框的属性。

customBorders: [
    {
        range: {
            from: {row: 1, col:1},
            to: {row: 3, col:3}
        },
        top: {width: 2, color: '#25e825'},
        right: {width: 2, color: '#25e825'},
        bottom: {width: 2, color: '#25e825'},
        left: {width: 2, color: '#25e825'}
    },
    {
        row: 2,
        col: 2,
        top: {width: 2, color: '#7687c5'},
        right: {width: 2, color: '#7687c5'},
        bottom: {width: 2, color: '#7687c5'},
        left: {width: 2, color: '#7687c5'}
    }
]

image.png

17、单元格合并可以进行初始化配置,如下:

mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...],

例如:

mergeCells: [

{row:0, col:0, rowspan:5, colspan:1},

{row:5, col:0, rowspan:4, colspan:1}

]

也可以先声明单元格允许合并,mergeCells:true,再利用合并方法操作。


hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    // minSpareRows: 30,  
   cells: function(row, col, prop) {  
         this.renderer = myRenderer;       
   },  
   mergeCells: true

18、className

// 容器单元格的class属性(htCenter,htLeft,htRight,htJustify,htTop,htMiddle,htBottom),默认值undefined,这些属性将作为容器单元格内容的对齐方式

19、cell

// 指定单元格的某些属性(数组),如下:
cell: [
    {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右对齐垂直居中,只读
    {row:1, col:1, className: 'htLeft'} // 左对齐
]

20、startRows

// 初始行数

21、startCols

// 初始列数

22、wordWrap

// 自动换行,默认true

23、copyable

// 是否允许键盘复制

默认true,如下面的官网说明,这个只适用于键盘上CTRL + C的复制,不适用于拖动复制。

Make cell copyable (pressing CTRL + C on your keyboard moves its value to system clipboard).

Note: this setting is false by default for cells with type password.

24、fillHandle

// 是否允许拖动复制

默认true,也可以控制方向:fillHandle: 'vertical'

如果设置为false,则选中单元格后,在右下方不会出现可以拖动的点

25、renderAllRows

// 是否呈现所有行

如果键入true,将禁用handsontable的虚拟呈现机制。

也就是说如果键入true,则当你用键盘上下移动数据时,handsontable中的数据不会随着焦点的下移或上移同步移动;

如果是false,则当你用键盘上下移动数据时,滚动条也会随着焦点上下移动

目录
相关文章
|
定位技术
百度地图缩放级别与比例尺的关系
百度地图缩放级别与比例尺的关系
2047 0
|
JavaScript
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
1569 0
|
Java 应用服务中间件 Android开发
IDEA 编译时 报 “常量字符串过长” 解决办法
IDEA 编译时 报 “常量字符串过长” 解决办法
4491 0
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
8341 0
|
前端开发 Shell API
强大的类excel插件,handsontable的简单应用
强大的类excel插件,handsontable的简单应用
731 1
|
8月前
|
Python Windows
Miniconda 安装与环境配置全流程图解(2025 最新版)
Miniconda 可以看作是 Anaconda 的“轻装版”,只自带 conda 包管理器与基础的 Python 运行时。它体积小、部署速度快,特别适合按需创建与管理虚拟环境的用户。与 Anaconda 相比,Miniconda 不会预先安装一大堆科学计算库,你可以根据项目需求再单独选择、安装需要的包,因此整体更轻巧、更灵活。 本文将手把手演示在 Windows 下安装 Miniconda 的全过程:从下载安装器、完成向导配置、设置环境变量,到最后的基础验证与简单示例,帮助你迅速把 Miniconda 用起来。
10118 12
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
2989 11
|
JavaScript BI
基于jeecg-boot集成luckysheet记录
基于jeecg-boot集成luckysheet记录
433 0
|
JavaScript 前端开发 UED
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~