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风格, ...
随机推荐
- T分布(T-Distribution)
1.What is the T Distribution? T分布(也叫Student 's T分布)是一组与正态分布曲线几乎相同的分布,只是更短更胖一点.当有小样本时,使用t分布而不是正态分布.样本 ...
- Struct2总结
摘自<javaWeb整合开发王者归来> 一.Struct2工作流程 1.访问jsp页面 /struts2/login.jsp 2.提交表单后数据提交给 /struts2/loginPer ...
- Usage of “symmetrical” and “symmetric”
What is the appropriate usage of "symmetrical" and "symmetric" (using the geomet ...
- luoguP1080 国王游戏 (贪心+高精度)
题目链接:https://www.luogu.org/problemnew/show/P1080 参考:https://www.luogu.org/problemnew/solution/P1080 ...
- poj1088-滑雪 【dfs 记忆化搜索】
http://poj.org/problem?id=1088 滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 79806 ...
- Too Rich(贪心+DFS)
Too Rich http://acm.hdu.edu.cn/showproblem.php?pid=5527 Time Limit: 6000/3000 MS (Java/Others) Me ...
- Visual Event查看页面相关绑定事件
页面相关绑定的事件比较复杂,在不熟悉的情况下很难找到相关逻辑的位置,所以希望借助工具来帮自己理清相关事件的脉络走向. 浏览器 工具 chrome( 58.0.3029.110) Visual Even ...
- Executor(一)ExecutorService 线程池
Executor(一)ExecutorService 线程池 本篇主要涉及到的是 java.util.concurrent 包中的 ExecutorService.ExecutorService 就是 ...
- Memocache
http://blog.csdn.net/zhoufoxcn/article/details/6282099 http://blog.csdn.net/dinglang_2009/article/de ...
- 541. Reverse String II
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...