Handsontable - 配置属性(上)

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

1、固定行列位置

fixedRowsTop: 行数 //固定顶部多少行不能垂直滚动

fixedColumnsLeft: 列数 //固定左侧多少列不能水平滚动

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

manualColumnResize: true/false // 当值为true时,允许拖动,当为false时禁止拖动

manualRowResize: true/false // 当值为true时,允许拖动,当为false时禁止拖动

3、延伸列的宽度

stretchH: last/all/none // last:延伸最后一列,all:延伸所有列,none默认不延伸

4、手动固定某一列

manualColumnFreeze: true/false  

// 当值为true时,选中某 一列,右键菜单会出现freeze this column选项,该选项的作用是固定这一列不可水平滚动,并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column,意思是取消该列的固定,并将其还原到初始位置

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

manualColumnMove: true/false // 当值为true时,列可拖拽移动到指定列

manualRowMove: true/false // 当值为true时,行可拖拽至指定行

// 当属性的值为true时,行头或列头可以被拖拽移动,移动后该行或列将会被移动到指定位置,原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行

6、设置当前行或列的样式

currentRowClassName:当前行样式的名称

currentColClassName:当前列样式的名称

7、行分组或列分组

groups: [{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]

// 上面的例子介绍了4个分组,第0-2列为一组,第3-5列为第二组,第0-4行为一组,第5-7列为第二组。分组可在行头或列头看见,分组可被展开或隐藏

8、允许排序

columnSorting: true/false/对象// 当值为true时,表示启用排序插件// 当值为true时,排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时,该对象包含两个属性:column:列数。sortOrder:true/false,升序或降序,true为升序排列。当用对象启动插件后可用如下方式禁用插件:hot.updateSettings({
columnSorting:false});
// 排序的使用也可已直接调用sort()方法实现。如下操作:if(hot.sortingEnabled){
hot.sort(行数,true/false); //true为升序,false为降序}

9、显示行头列头

colHeaders: true/fals/数组 // 当值为true时显示列头,当值为数组时,列头为数组的值

例如:colHeaders: ['日期', '地点', '商品', '单价', '销量']

rowHeaders: true/false/数组 // 当值为true时显示行头,当值为数组时,行头为数组的值

例如:rowHeaders: [1, 2, 3, 4, 5, 6]

10、表格数据

data:[[第一行数据],[第二行数据],...[第n行数据]]/对象数组

获取数据的方法:hot.getData()。

加载数据的方法:hot.loadData(data)。

当不需要显示某一列的时候可用如下格式设置:

columns:[
   {data:0},
   {data:2}
]

这里就不显示第二列数据,只有第1、3列数据

data可以有两种格式。

第一种是二维数组:

data: [
  ['日期','销售地点','销售商品','单价','销量'],
  ['2017-01', '北京', '冰箱', '3399', 530],
  ['2017-01', '天津', '空调', '4299', 522],
  ['2017-01', '上海', '洗衣机', '1299', 544],
  ['2017-01', '广州', '彩电', '4599', 562],
  ['2017-01', '深圳', '热水器', '1099', 430],
  ['2017-02', '重庆', '笔记本电脑', '4999', 666],
  ['2017-02', '厦门', '油烟机', '2899', 438],
  ['2017-02', '青岛', '饮水机', '899', 620],
  ['2017-02', '大连', '手机', '1999', 500]
];

第二种是对象数组:如果使用该方式渲染数据,则不能使用插入列方法:insert_col和remove_col

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},
  {'date': '2017-01', 'place':'广州', 'goods':'彩电', 'price':4599, '销量':562},
  {'date': '2017-01', 'place':'深圳', 'goods':'热水器', 'price':1099, '销量':430},
  {'date': '2017-02', 'place':'重庆', 'goods':'笔记本电脑', 'price':4999, '销量':666},
  {'date': '2017-02', 'place':'厦门', 'goods':'油烟机', 'price':2899, '销量':438},
  {'date': '2017-02', 'place':'青岛', 'goods':'饮水机', 'price':1099, '销量':620},
  {'date': '2017-02', 'place':'大连', 'goods':'手机', 'price':1999, '销量':500}
]
目录
相关文章
vue3 element-plus 实现表格数据更改功能
在 vue3 中使用 element-plus 实现表格数据更改功能,可以通过以下步骤实现:
1140 0
|
容器
Handsontable - 配置属性(下)
Handsontable - 配置属性(下)
1058 0
Handsontable - 配置属性(下)
|
6月前
|
JavaScript 前端开发 安全
【vue】如何修改iview组件的样式(element同)
【vue】如何修改iview组件的样式(element同)
86 1
|
4月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
|
6月前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
6月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
381 1
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
928 0
VUE element-ui之table表格内容样式(颜色)修改
|
缓存 前端开发 JavaScript
修改Antd默认样式总结
修改Antd默认样式总结
1395 0