zoukankan      html  css  js  c++  java
  • Html table 实现Excel多格粘贴

    Html table 实现Excel多格粘贴

    电商网站的后台总少不了各种繁杂数据的录入,旁边的运营妹子录完第138条商品的时候,终于忍不住转身吼到:为什么后台的录入表不能像Excel那样多行粘贴!!!于是,就有了这片文章~

    实现的就是这样的一个效果,从Excel或Number复制好多行数据后,直接在table起始单元格按下C+V,表格数据立马就齐刷刷站好位了!强迫症表示看着好爽感!

    简单到不行的原理:给表格元素绑定粘贴事件,做到这四件事就可以啦(案例代码依赖jquery框架):

    1. 消除默认粘贴事件

      e.preventDefault();
      
    2. 获取粘贴板上的数据

      var data = null;  
      var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome  
      data = clipboardData.getData('Text');
      

      复制出来的数据是用制表符 和换行符 隔开的数据,显示出来是带空格的一系列字符串,如果在调试时想要清楚的查看带 , 的字符串,可以把字符串 替换成成\t \n:

    3. 通过制表符和换行符解析数据,先通过换行符将不同行数组分开成数组,再把每个单元格数据通过制表符分开,同样构造成数组。

    //解析数据
    var arr = data.split('
    ')
    	.filter(function(item) {    //兼容Excel行末
    ,防止出现多余空行
      		return (item !== "")
    	}).map(function(item) {
      		return item. split("	");
    	});
    //最终数据模式
    [
      [a0,a1,a2],//row1  
      [b0,b1,b2],//row2 
      [c0,c1,c2],//row3
    ]
    
    1. 把解析好的数据放在相应单元格
    var tab = this;  //表格DOM
    var td = $(e.target).parents('td'); //起始单元格
    var startRow = td.parents('tr')[0].rowIndex; //起始单元格行数
    var startCell = td[0].cellIndex; //起始单元格列数
    var rows = tab.rows.length;  //总行数
    for (var i = 0; i < arr.length && startRow + i < rows; i++) {
      var cells = tab.rows[startRow + i].cells.length;  //该行总列数
      for(var j = 0; j < arr[i].length && startCell + j < cells; j++) {
        var cell = tab.rows[startRow + i].cells[startCell + j];
        $(cell).find(':text').val(arr[i][j]);  //找到cell下的input:text,设置value
      }
    }
    

    需要注意的是在进行行或列的循环时,除了判断循环数i/j小于复制数据的行/列数外,还要判断当前所在行/列是否小于表格的总行/列数;

    最终实现的代码如下:

    $('table').bind('paste', function(e) {
      	event.preventDefault(); //消除默认粘贴
      	//获取粘贴板数据
      	var data = null;  
      	var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome  
      	data = clipboardData.getData('Text');
      	console.log(data.replace(/	/g, '\t').replace(/
    /g, '\n')); //data转码
      	//解析数据
      	var arr = data.split('
    ')
            .filter(function(item) {    //兼容Excel行末
    ,防止出现多余空行
              return (item !== "")
            }).map(function(item) {
              return item. split("	");
            });
      	//输出至网页表格
        var tab = this;  //表格DOM
        var td = $(e.target).parents('td');
        var startRow = td.parents('tr')[0].rowIndex; 
        var startCell = td[0].cellIndex; 
        var rows = tab.rows.length;  //总行数
        for (var i = 0; i < arr.length && startRow + i < rows; i++) {
          var cells = tab.rows[startRow + i].cells.length;  //该行总列数
          for(var j = 0; j < arr[i].length && startCell + j < cells; j++) {
            var cell = tab.rows[startRow + i].cells[startCell + j];
            $(cell).find(':text').val(arr[i][j]);  //找到cell下的input:text,设置value
          }
        }
    });
    

    只要把这一段绑在表格上,就可以华丽丽的实现多单元格复制啦~不过因为table单元格内的dom结构会有所差异,所以在循环内给单元格赋值时要留意下有没有问题。

    小白一枚希望能够帮到大家~如果任何的小细节有更好更优雅的实现或编码方法,都希望大神们能在评论里指教,谢谢!

  • 相关阅读:
    调试技术能够让新技术的学习事半功倍
    世界500强绩效考核(KPI) [11]
    .NET 4.0新功能介绍:In Process Side By Side
    What's New in the .NET Framework Version 4
    Production Debugging for .NET Framework Applications
    Project 2007下的自动计算问题
    SQL操作全集
    WPF1.1 理解Windows图形
    .NET Framework Version 4 Application Compatibility Walkthrough
    Fixing BizTalk ENTSSO Failure on Windows 7, Vista or Server 2008 after .NET 4.0 Installation
  • 原文地址:https://www.cnblogs.com/daisykoo/p/5950248.html
Copyright © 2011-2022 走看看