handsontable 问题
碰到问题了,去官网上找community:http://docs.handsontable.com/0.16.1/tutorial-quick-start.html
1、
描述:把handson table放在bootstrap tab中,首次没有激活,table没有正常显示。
原因:这种情况下,table invisible,所以不会调用render(),不会正常显示
解决办法:
$('a[href="#data"]').on('shown.bs.tab', function (e) {
hsd.hot.render();
});
另一个问题
描述:在上面的基础上,fixedRowsTop无效
解决办法:添加这一句,重新更新。
hsd.hot.updateSettings({fixedRowsTop : 1});
注:直接更新就可,不用render()也行。
2、
频繁切换表格内容是,使用updateSetting,这样就不会出现数据显示异常。
3、
minSpareRows:1,
minSpareCols:1
在最后一行输入内容,enter后,会自动增加一行。
4、
给某行设置背景颜色:这一类问题都这样解决
cells:function(row, col, prop){
var cellProperties = {};
if(row === 0){
cellProperties.renderer = firstRowRenderer;
}
return cellProperties;
}
var firstRenderer = function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.background = '#eee';
}
5、
建空表是data:[[]];
6、
滚动到指定行
hsd.hot.selectCell(1, 0);
hsd.hot.deselectCell();
找了好久,原来确实没有默认的方法,只能自己解决了,hsd.hot是我自己定义的表
7、copy,paste,cut
demo--contextMenu中有例子,但是jsfiddle中,copy和paste显示有点不正常;cut,没有提到
8、
//----------初始化开始----------------------
//获取数据
$.get('json/handsontable.json', function(data){
// hsd.data = data;
hsd.init(data);
}); // 更新
$('#update').on('click', function(){
$.get('json/handsontable1.json', function(data){
// hsd.data = data;
// hsd.init();
hsd.hot.updateSettings({
data:data
})
});
}) //----------初始化结束---------------------- hsd.con = $('#con');
hsd.init = function(data){
// updateSettings 时不会执行这一句,
console.log('sfp')
hsd.hot = new Handsontable(hsd.con[0], {
data: data,
rowHeaders: true,
colHeaders: ['SLE', 'Control'],
contextMenu: true,
columnSorting: true,
manualColumnResize: true,
fixedRowsTop: 1,
fixedColumnsLeft: 1,
sortIndicator: true,
cells: function(row, col, prop){
// updateSetting时 会执行这一句
if(row === 0 && col === 0){
console.log(data[0][0]);
}
}
});
};
解决办法:init不传参数,获取到B之后,执行hsd.data = B, init中得数据用hsd.data
10、如何区分自动创建的row和通过contextmenu创建的row:http://jsfiddle.net/2oc2hb3e/18/
var flag = false;
afterRender: flag = true;
afterCreateRows: if(flag){ // }
如果有mincols,removeRows,会自动CreateRows,所以需要在removeRows:flag=false
注意:update和createtable时,都先要flag=false
handsontable 问题的更多相关文章
- handsontable组件和jqwidgets(jqxdragdrop组件)在一个页面产生调整宽高bug
修改handsontable.full.js handsontable绑定的"mouseup"事件,默认是window区域太大.引起冲突.
- Handsontable 学习笔记-Methods
Handson: 亲自实践 先给出数据源和基本配置: var data =[ ["A1","B1","C1","D1"] ...
- handsontable插件HOOK事件
Hook插件 afterChange (changes: Array, source: String):1个或多个单元格的值被改变后调用 changes:是一个2维数组包含row,prop,o ...
- handsontable的单元格操作方法
1.为handsontable添加钩子方法 addHook(key,callback):key为钩子方法名 <span style="font-size:18px;"> ...
- Handsontable Read-only cells
一,列只读
- Handsontable 新增一行 默认值
效果图:
- handsontable插件事件
Hook插件 afterChange (changes: Array, source: String):1个或多个单元格的值被改变后调用 changes:是一个2维数组包含row,prop,o ...
- handsontable的核心方法
1.为handsontable添加钩子方法 addHook(key,callback):key为钩子方法名 <span style="font-size:18px;"> ...
- Handsontable对单元格的操作
1.自动填充单元格数据 fillHandle:true/false //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...
- 网页版仿Excel效果组件--handsontable拓展运用
引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...
随机推荐
- linux下set命令的参数及用法
linux set 命令 功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选 ...
- Js 过滤emoji表情...持续补充中..
原文来自: https://www.cnblogs.com/tsjTSJ/p/7065544.html 最全最详细的用JS过滤Emoji表情的输入 在前端页面开发过程中,总会碰到不允许输入框输入e ...
- springboot+cxf 开发webservice
参考 https://www.cnblogs.com/fuxin41/p/6289162.html pom.xml <?xml version="1.0" encoding= ...
- clear(), evict(), flush()三种方法的用法实例
先贴代码: @Before public void init() { System.out.println("Test开始之前执行"); Configuration configu ...
- 数字与字符串之间的转换以及%f与%lf的输入输出用法区别
1.C++字符串与C字符串的转换: (1)string --> char * string str("OK"); strcpy(p,str.c_str());//p是char ...
- 132. Palindrome Partitioning II (String; DP)
Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...
- MyBatis核心配置文件详解
------------------------siwuxie095 MyBatis 核心配置文件详解 1.核心 ...
- jsoncpp在Windows和Linux下的安装
Windows下: 参考这个网站,没什么问题,注意MTd这些选对就行了. http://www.cppblog.com/wanghaiguang/archive/2013/12/26/205020.h ...
- vue1.0学习
vue 一片html代码配合上json,在new出来vue实例 Demo:1 数据双向绑定(v-model="message",{{message}}) <div id=&q ...
- gis笔记 wms wfs等OGC标准
WFS 和WMS的区别 WFS是基于地理要素级别的数据共享和数据操作,WFS规范定义了若干基于地理要素(Feature)级别的数据操作接口,并以 HTTP 作为分布式计算平台.通过 WFS服务,客户端 ...