Handsontable

Stella981
• 阅读 690

[TOC]


常用

<!DOCTYPE html>
<html>
    <head>
        <!-- <meta charset="UTF-8"> -->
        <title>Handsontable</title>
        <script src="dist/jquery-1.11.1.min.js"></script>
        <script src="dist/handsontable.full.js"></script>
        <link rel="stylesheet" href="dist/handsontable.full.css" />
        <link rel="stylesheet" type="text/css" href="dist/main.css">
    </head>
    <body>
        <div id="example"></div>
        <script>
            $(document).ready(function () {
                var data = [
                    {riqi:'2019-06-07', goods:'冰箱',price: '3399'},
                    {riqi:'2019-06-07', goods: '空调', price:'4299'},
                    {riqi:'2019-06-07', goods: '洗衣机',price: '1299'},
                ];
                function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    if (prop == 'riqi') {
                        td.style.color = '#32CD32';
                    }
                    else if (prop == 'goods') {
                        td.style.textAlign = 'right';
                    }
                    else if (prop == 'price') {
                        td.innerText = value != null ? numbro(value).format('0.00') : "";
                    }
                }
                Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
                var hot = new Handsontable(document.getElementById('example'),{
                    data: data,
                    colHeaders: ['日期', '商品', '单价'],
                    columns: [{
                        data: 'riqi',
                        type: 'date',
                        dateFormat: 'YYYY-MM-DD'
                    },{
                        data: 'goods',
                        type: 'text'
                    },{
                        data: 'price',
                        type: 'numeric'
                    }],
                    autoColumnSize: true,
                    cell: [
                        {row: 999, col: 999, readOnly: true}
                    ],
                    contextMenu: {
                        items: {
                        "copy": { name: '复制', },
                        "hsep1": "---------",
                        "undo": { name: '撤销' },
                        "redo": { name: '重做' },
                        }
                    },
                    cells: function (row, col, prop) {
                        var cellProperties = {};
                        cellProperties.renderer = "negativeValueRenderer";
                        return cellProperties;
                    },

                });
                function callBack(changes,source){ 
                }
                Handsontable.hooks.add('afterChange',callBack);
            });
        </script>
    </body>
</html>

属性

属性

作用

columnSorting: true

列排序

mergeCells: true

合并单元格

comments: true

启用批注

search: true

查询

currentRowClassName: 'currentRow'

当前行的类名

currentColClassName: 'currentCol'

当前列的类名

customBorders: true

自定义边框设置

headerTooltips:true

工具栏启用

dropdownMenu: true

下拉菜单

filters:true

筛选条件

表格数据

data: [
    ['日期','销售地点','销售商品','单价','销量'],
    ['2017-01', '北京', '冰箱', '3399', 530],
    ['2017-01', '天津', '空调', '4299', 522],
];


data: [
    {'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '销量':530},
    {'date': '2017-01', 'place':'天津', 'goods':'空调', 'price':4299, '销量':522},
    {'date': '2017-01', 'place':'上海', 'goods':'洗衣机', 'price':1299, '销量':544},
];


 data: Handsontable.helper.createEmptySpreadsheetData(100, 100),
 data: Handsontable.helper.createSpreadsheetData(50, 50),

固定行列位置

属性

作用

fixedRowsTop:1

固定顶部多少行不能垂直滚动

fixedColumnsLeft:1

固定左侧多少列不能水平滚动

拖拽行头或列头改变行或列的大小

属性

作用

manualColumnResize:true | false

当值为 true 时,允许拖动

manualRowResize:true | false

当值为 false 时禁止拖动

延伸列的宽度

属性

作用

stretchH:last | all | none

延伸最后一列; 延伸所有列 ; 默认不延伸

拖动行或列到某一行或列之后

属性

作用

manualColumnMove:true | false

值为 true 时,列可拖拽移动到指定列

manualRowMove:true | false

值为 true 时,行可拖拽至指定行

设置当前行或列的样式

行分组或列分组

允许排序

显示行头列头

属性

作用

colHeaders:true | fals | array

列头

rowHeaders:true | fals | array

行头

右键菜单展示

属性

作用

contextMenu:true | fals | array

当值为 true 时,启用右键菜单

自适应列大小

属性

作用

autoColumnSize:true | false

自适应列大小

最小列数

属性

作用

minRows:1

最小行数

minCols: 1

最小列数

minSpareCols:1

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

maxCols:1

最大列数

maxRows:1

最大行数

minSpareRows:1

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

observeChanges

属性

作用

observeChanges:true | false

当值为 true 时,启用 observeChanges 插件

列宽

属性

作用

colWidths:1
colWidths : [100, 200, 300, 200, 100]

列宽

自定义边框

属性

作用

customBorders:true

自定义单元格边框

一个单元格

customBorders: [  
{ 
    row: 2,  
    col: 2,  
    left: {  
        width: 2,  
        color: 'red' 
    },  
    right: {  
        width: 1,  
        color: 'green' 
    }  
}],

多个单元格

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' 
    }  
}],


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'}
    }
],

单元格合并

属性

作用

mergeCells:true

单元格合并

className

className 属性

作用

htCenter

htLeft

左对齐

htRight

右对齐

htJustify

htTop

htMiddle

垂直居中

htBottom

className:'htRight htMiddle'

指定单元格的某些属性

参数

作用

editor: false

只读

cell: [
    {row:0, col:0, className: 'htRight htMiddle', editor: false},
    {row:1, col:1, className: 'htLeft'}
],

初始行数

初始列数

自动换行

属性

作用

wordWrap:true

自动换行

是否允许复制

允许键盘复制

属性

作用

copyable:true

允许键盘复制

允许拖动复制

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

属性

作用

fillHandle:true

允许拖动复制

fillHandle: 'vertical'

只可以垂直拖动复制

是否呈现所有行

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

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

属性

作用

renderAllRows:true

将禁用 handsontable 的虚拟呈现机制

操作单元格

语法

作用

hot.getData(1,1,2,2);

获取单元格范围值

hot.getDataAtCell(row,col);

获取单元格值

hot.getSelected();

获取选中的单元格

hot.setDataAtCell(row, col, value, source);

设置单元格值

hot.alter('remove_row',0);

删除行

hot.clear();

清空数据

hot.selectCell(1,1,2,2);

设置单元格为选中状态

样式

td.style.color = '#32CD32';

修改字体颜色

td.style = 'font-weight: bold;';

字体加粗

td.innerText = value != null ? numbro(value).format('0.000') : "";

格式化数据

td.style.textAlign = 'right';

右对齐

function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (prop == 'address') {
        td.style.color = '#32CD32';
    }
    else if (prop == 'price') {
        td.innerText = value != null ? numbro(value).format('0.000') : "";
    }
    else if (prop == 'sales') {
        td.style.textAlign = 'right';
        td.innerText = value != null ? numbro(value).format('0,0.00') : "";
    }
}
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);


cells: function (row, col, prop) {
    var cellProperties = {};
    cellProperties.renderer = "negativeValueRenderer";
    return cellProperties;
},

事件

鼠标点击

$(document).ready(function () {
    function callBack(event,coords,td){
        var row = coords.row;
        var col = coords.col;
    }
    Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);
)};

修改单元格

afterChange (
    changes:[row,prop,oldVal,newVal],
    source: "alter","empty","populateFromArray","loadData","autofill","paste"
)


$(document).ready(function () {
    function callBack(changes,source){ 
    }
    Handsontable.hooks.add('afterChange',callBack);
)};

单元格只读

指定单元格

cell: [
    {row: 1, col: 0, readOnly: true}
],

指定列

columns: [{
    readOnly: true
}],

所有单元格

cells: function (row, col, prop) {
    var cellProperties = {};
    cellProperties.readOnly = true
    return cellProperties;
},
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这