使用handsontable插件做一个类型Excel的表格工具

最新推荐文章于 2024-03-15 15:56:29 发布

程序员奋斗者GO

最新推荐文章于 2024-03-15 15:56:29 发布

阅读量294

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37896260/article/details/110185863

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

完整demo代码
包含添加行
删除行，
添加列
删除列
合并单元格
撤回等

<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script> -->

<script src="../js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="./handsontable/handsontable.full.min.css" />
<link rel="stylesheet" type="text/css" href="./handsontable/main.css" />
<script type="text/javascript" language="JavaScript" src="./handsontable/handsontable.full.min.js"></script>
 
  <style>
    #hot-display-license-info{
      display: none;
    }
    #metrical_node_table table thead tr th{
        background-color: rgb(199, 232, 181);
        color: rgb(0, 0, 0);
        height: 30px;
        line-height: 30px;
    }

    #metrical_node_table table tbody tr th{
        height: 30px;
        line-height: 30px;
    }

    #metrical_node_table table tbody tr td{
        height: 30px;
        line-height: 30px;
    }

    #metrical_node_table table thead tr th .changeType {
        margin-top: 8px;
    }
  </style>
</head>
<body>
<div>
  <div>
    <button id="editTable">获取数据</button>
  </div>
  <div id="metrical_node_table"></div>
</div>

<script>
 
  var hotElement = document.querySelector('#metrical_node_table');
  var hotElementContainer = hotElement.parentNode;
  // 表格数据
  var dataObject = [
    {
      id: 1,
      flag: 'EUR',
      currencyCode: 'EUR',
      currency: 'Euro',
      level: 0.9033,
      units: 'EUR / USD',
      asOf: '08/19/2019',
      onedChng: 0.0026
    },
    {
      id: 2,
      flag: 'JPY',
      currencyCode: 'JPY',
      currency: 'Japanese Yen',
      level: 124.3870,
      units: 'JPY / USD',
      asOf: '08/19/2019',
      onedChng: 0.0001
    },
    {
      id: 3,
      flag: 'GBP',
      currencyCode: 'GBP',
      currency: 'Pound Sterling',
      level: 0.6396,
      units: 'GBP / USD',
      asOf: '08/19/2019',
      onedChng: 0.00
    }
  ];
  //表格配置
  var columns = [
    {
      data: 'id',
      type: 'numeric',
      width: 40,
      className: 'htCenter', //设置表格居中
    },
    {
      data: 'flag',
      //renderer: flagRenderer  //设置单列渲染修改
    },
    {
      data: 'currencyCode',
      type: 'text'
    },
    {
      data: 'currency',
      type: 'text'
    },
    {
      data: 'level',
      type: 'numeric',
      numericFormat: {
        pattern: '0.0000'
      }
    },
    {
      data: 'units',
      type:'dropdown',
      source:['1F-中','2F','3F','4F','5F','...']
    },
    {
      data: 'asOf',
      type: 'date',
      dateFormat: 'MM/DD/YYYY'
    },
    {
      data: 'onedChng',
      type:'autocomplete',
      source:['1F-中','2F','3F','4F','5F','...'],
      strict: true,       //值为true，严格匹配               
      allowInvalid: true   //值为true时，允许输入值作为匹配内容，只能在strict为true时使用
    }
  ];

var data = [
    ['序号','1','2','3'],
    ['1', '4', ‘3’, '30'],
    ['2', '5', '4', '40'],
    ['3', '6', '5', '50'],
    ['4', '7', '6', '60']
];
var itemMenu = {};
var hotSettings = {
    data: data,
    rowHeaders: false,
    colHeaders: false,
    //minSpareRows: 1,   
    autoColumnSize: true,//自适应列宽
    observeChanges: true,
    //readOnly:true, //是否只读
    colWidths: [ 80, 200, 200, 80],//列宽度
    cells: function (row, col, prop) {
        var cellProperties ={};
        //第二列只读
        if((row==0&&col==1) || (row==1&&col==1)
        || (row==2&&col==1) || (row==3&&col==1) || (row==4&&col==1)){
            cellProperties.readOnly = true;	
        }
        //第四列只读
        if((row==0&&col==3) || (row==1&&col==3)
        || (row==2&&col==3) || (row==3&&col==3) || (row==4&&col==3)){
            cellProperties.readOnly = true;	
        }
        return cellProperties;
    },
    mergeCells: true,
    mergeCells: [
       //{row: 1, col: 1, rowspan: 2, colspan: 1},//这里处理合并的问题
    ],
    contextMenu:{
        items: {
            "row_below": {
                name: '向下插入一行',
                disabled: function (key,o) {
                    return hot.getSelected()[0][1] == 3
                }
            },
            "col_right": {
                name: '向右插入一列',
                disabled: function (key,o) {
                    return hot.getSelected()[0][1] == 3
                }
            },
            "mergeCells": {
                name: '合并单元格',
                disabled: function (key,o) {
                    return hot.getSelected()[0][1] == 3
                }
            },
            "alignment":{name: '对齐'},
            "remove_row": {
                name: '删除行',
                disabled: function (key,o) {
                    return hot.getSelected()[0][1] == 3
                }
            },
            "remove_col": {
                name: '删除列',
                disabled: function (key,o) {
                    return hot.getSelected()[0][1] == 3
                }
            },
            "hsep1": "---------",
            "undo": { name: '撤销' },
        },
    }
};

var hot = new Handsontable(hotElement, hotSettings);

$("#editTable").click(function(){
    var data = hot.getData();
    console.log(data)
})
 

</script>
</body>
</html>

文档地址：handsontable文档地址
文档demo：文档demo

程序员奋斗者GO

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用handsontable插件做一个类型Excel的表格工具

完整demo代码<!doctype html><html><head><!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css"><link rel="stylesheet" type="text/css" href="https://ha
复制链接

扫一扫