handsontable-常用配置
冻结单元格
var
//自动创建数据
myData = Handsontable.helper.createSpreadsheetData(100, 50),
container = document.getElementById('example1'),
positions = document.getElementById('positions'),
hot; hot = new Handsontable(container, {
data: myData,
colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
//显示行头和列头
rowHeaders: true,
colHeaders: true,
//冻结单元格
fixedRowsTop: 2,
fixedColumnsLeft: 2
}); setInterval(function () {
var str = '';
//获得可见首行的序号
str += 'RowOffset: ' + hot.rowOffset(); positions.innerHTML = str;
}, 100);
手动调整行列大小
var
container = document.getElementById('example1'),
hot; hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 10),
rowHeaders: true,
colHeaders: true,
//设置列的宽度
colWidths: [55, 80, 80, 80, 80, 80, 80],
//设置行的宽度,第四行是默认的
rowHeights: [50, 40, 100],
//手动调整列的宽度
manualColumnResize: true,
manualRowResize: true
});
滚动行列
http://docs.handsontable.com/0.16.0/demo-scrollbars.html
列的扩展
var
container1 = document.getElementById('example1'),
hot1; hot1 = new Handsontable(container1, {
data: Handsontable.helper.createSpreadsheetData(40, 6),
colWidths: 47,
rowHeaders: true,
colHeaders: true,
//扩展最后一列,其他列的宽度是47
stretchH: 'last',
//把table的宽度设为容器的宽度,列平分宽度
stretchH: 'all',
//默认值
stretchH: 'none',
//右键可用,默认为undefined
contextMenu: true
});
列的冻结:需要开启contextMenu
var
myData = Handsontable.helper.createSpreadsheetData(200, 100),
container = document.getElementById('example1'),
hot; hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
fixedColumnsLeft: 2,
contextMenu: true,
//列的手动冻结
manualColumnFreeze: true
});
行列的移动:列头左侧,行头上侧
var
example1 = document.getElementById('example1'),
hot; hot = new Handsontable(example1, {
data: Handsontable.helper.createSpreadsheetData(200, 20),
rowHeaders: true,
colHeaders: true,
manualColumnMove: true,
manualRowMove: true
});
当前元素高亮
var
data = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2013', 10, 11, 12, 13],
['2014', 20, 11, 14, 13],
['2015', 30, 15, 12, 13]
],
container = document.getElementById('example1'),
hot; hot = Handsontable(container, {
data: data,
minRows: 5,
minCols: 6,
//指定当前行的名字
currentRowClassName: 'currentRow',
//指定当前列的名字
currentColClassName: 'currentCol',
rowHeaders: true,
colHeaders: true
});
//选择元素
hot.selectCell(2,2);
分组:也可以设置groups:true,但是这种方式没有涉及到细节
var
example1 = document.getElementById('example1'),
settings,
hot; settings = {
data: Handsontable.helper.createSpreadsheetData(200, 20),
rowHeaders: true,
colHeaders: true,
groups: [
{
cols: [0, 2]
},
{
cols: [3, 7]
},
{
cols: [5, 7]
},
{
rows: [0, 4]
},
{
rows: [5, 7]
},
{
rows: [2, 4]
}
]
};
hot = new Handsontable(example1, settings);
Pre-populating new rows
Sorting data
可以使用array.prototype.sort(),排好序之后,在render(),不过这样会改变数据源的结构。如果想保持数据源不被破坏,需要使用如下方法:
columnSorting为true,表示可以排序,但是还没排好序
columnSorting为object,配置一些参数
检查是否开启排序
hot.sortingEnabled ? doSomething() : doSomethingElse();
是否排好序
return hotInstance.sortingEnabled && typeof hotInstance.sortColumn !== 'undefined';
//sortOrder
istrue
, then the order is ascending, otherwise, the order is descending.
排序的三种方法
1、columnSorting
2、点击表头:最常用
3、调用sort():如果开启了columnSorting,则可以使用sort(0, false)方法
Pagination
http://docs.handsontable.com/0.16.0/demo-pagination.html#3
handsontable-常用配置的更多相关文章
- logback 常用配置详解<appender>
logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ...
- 【转】logback logback.xml常用配置详解(三) <filter>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- 【转】logback logback.xml常用配置详解(二)<appender>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- 【转】logback logback.xml常用配置详解(一)<configuration> and <logger>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- 【转】logback 常用配置详解(序)logback 简介
原创文章,转载请指明出处:http://aub.iteye.com/blog/1101222, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- logback 常用配置详解(二) <appender>
logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...
- SpringBoot常用配置简介
SpringBoot常用配置简介 1. SpringBoot中几个常用的配置的简单介绍 一个简单的Spring.factories # Bootstrap components org.springf ...
- .net学习笔记----WebConfig常用配置节点介绍
一.配置文件入门 .Net提供了一种保存项目配置信息的办法,就是利用配置文件,配置文件的后缀一般是.config.在WinForm程序中配置文件一般是App.config.在Asp.net中一般默认是 ...
- logback logback.xml常用配置详解(三)
logback logback.xml常用配置详解 <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之 ...
- JVM 常用配置
JVM的配置,最常用的两个配置就是:-Xms512m –Xmx1024m -Xms设置JVM的初始化内存大小,-Xmx为最大内存大小,当突破这个值,将会报内存溢出,导致的原因有很多,主要是虚拟机的回收 ...
随机推荐
- C#多线程编程之:Timer(定时器)使用示例
Timer类:设置一个定时器,定时执行用户指定的函数.定时器启动后,系统将自动建立一个新的线程,执行用户指定的函数. 构造函数:Timer(TimerCallback callback, object ...
- Java通过匿名类来实现回调函数
在C语言中,函数名可以当做函数指针传递给形参从而实现回调 void f1() { printf("f1()\n"); } void f2() { printf("f2() ...
- python HTMLTestRunner.py
Mac下HTMLTestRunner.py存放路径: -/anaconda/lib/python3.6/site-packages/HTMLTestRunner.py 已经更改,python3可以直接 ...
- Executors中的几种线程调用方式
一.Executors是java5以后提供的一套api,使用跟上面非常方便.Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线 ...
- 配置spring的log4j日志记录
1.导入依赖包pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- MultipartFile 转换为File
选择用缓冲区来实现这个转换即使用java 创建的临时文件 使用 MultipartFile.transferto()方法 . MultipartFile multipartFile; File fil ...
- XACT Q&A (转)
XACT Q&A 传送门:http://blog.csdn.net/xoyojank/article/details/4098633
- 听说去了BAT的 Linuxers 都做过这套面试题!
本部分为单项选择题,每道题仅有一个答案,每题2分. 1. cron 后台常驻程序 (daemon) 用于: A. 负责文件在网络中的共享 B. 管理打印子系统 C. 跟踪管理系统信息和错误 D. ...
- centos7 ping www.baidu.com ping 不通。
centos7 ping www.baidu.com ping 不通. 记录下,在搭建NodeJS服务器遇到的坑:centos7 ping www.baidu.com ping 不通. 1. 配置网卡 ...