電商網(wǎng)站的后臺(tái)總少不了各種繁雜數(shù)據(jù)的錄入，旁邊的運(yùn)營(yíng)妹子錄完第138條商品的時(shí)候，終于忍不住轉(zhuǎn)身吼到：為什么后臺(tái)的錄入表不能像Excel那樣多行粘貼Ｗ峄辍！见秽！于是，就有了這片文章～
實(shí)現(xiàn)的就是這樣的一個(gè)效果讨盒，從Excel或Number復(fù)制好多行數(shù)據(jù)后解取，直接在table起始單元格按下C+V，表格數(shù)據(jù)立馬就齊刷刷站好位了返顺！強(qiáng)迫癥表示看著好爽感禀苦！
原理：綁定表格的粘貼事件，取消默認(rèn)事件遂鹊，解析粘貼板中的數(shù)據(jù)為以行和單元格分開(kāi)的數(shù)組振乏，然后按照表格格式輸出到input的value中。
開(kāi)發(fā)過(guò)程中遇到的問(wèn)題總結(jié)起來(lái)主要有三個(gè)：
1.對(duì)粘貼板中表格數(shù)據(jù)的拆分需要兼容不同軟件的復(fù)制格式秉扑。IOSNumbers慧邮，WindowsExcel和IOSExcel之間都有細(xì)微的差別。
表格軟件在復(fù)制數(shù)據(jù)時(shí)舟陆，通過(guò)制表符
\t來(lái)分隔行內(nèi)不同單元格數(shù)據(jù),通過(guò)換行符\n或回車(chē)符\r來(lái)分隔不同行的數(shù)據(jù)误澳。我們?cè)跍y(cè)試中通過(guò)console.log打印數(shù)據(jù)，這些轉(zhuǎn)義符會(huì)自動(dòng)轉(zhuǎn)換成空格或換行秦躯，為使這些轉(zhuǎn)義符通過(guò)字符的形式直接輸出忆谓，我們需要對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單的轉(zhuǎn)碼，將\t替換成\\\\t踱承，以此類(lèi)推倡缠。
測(cè)試代碼如下：
var clipboardData = window.clipboardData || e.originalEvent.clipboardData,
data = clipboardData.getData('Text'); // 獲取到粘貼板數(shù)據(jù)哨免，兼容IE || chrome
console.log(data.replace(/\n/g, '\\n').replace(/\t/g, '\\t').replace(/\r/g, '\\r'));
不同表格軟件復(fù)制格式測(cè)試結(jié)果：
結(jié)果分析： 行內(nèi)的不同單元格分隔都使用’\t’，而換行分隔有使用’\n”\r’兩種情況昙沦。而且在windows系統(tǒng)的excel琢唾，末行的最后還會(huì)加上一個(gè)換行符。
兼容這三個(gè)軟件的最終解析粘貼板數(shù)據(jù)代碼如下：
//獲取粘貼板數(shù)據(jù)
var clipboardData = window.clipboardData || e.originalEvent.clipboardData, // IE || chrome
data = clipboardData.getData('Text'),
//判斷表格數(shù)據(jù)是使用\n還是\r分行桅滋，解析成行數(shù)組
rowArr = (data.indexOf(String.fromCharCode(10)) > -1) ?
data.split(String.fromCharCode(10)) :
data.split(String.fromCharCode(13)),
//根據(jù)\t解析單元格
cellArr = rowArr.filter(function(item) {
return (item !== "") //兼容windowsExcel行末\n慧耍，防止粘貼出多余空行
}).map(function(item) {
return item. split(String.fromCharCode(9));
});
2.將數(shù)組中的數(shù)據(jù)插入web table 時(shí)，防止粘貼數(shù)據(jù)超出表格邊界
用戶在復(fù)制的時(shí)候丐谋，很可能復(fù)制的行數(shù)或列數(shù)超出web table的總行總列數(shù)芍碧，因此我們?cè)谶M(jìn)行行或列的循環(huán)‘粘貼’時(shí)，除了判斷循環(huán)數(shù)i／j小于復(fù)制數(shù)據(jù)的行／列數(shù)外号俐，還要判斷當(dāng)前所在行／列是否小于表格的總行／列數(shù)泌豆；
最終代碼如下：
//輸出至網(wǎng)頁(yè)表格
var tab = $(e.target).parents('table')[0], //表格
td = $(e.target).parents('td'), //當(dāng)前單元格
startRow = td.parents('tr')[0].rowIndex, //當(dāng)前單元格行數(shù)
startCell = td[0].cellIndex, //當(dāng)前單元格列數(shù)
rows = tab.rows.length; //總行數(shù)
for (var i = 0; i < cellArr.length && startRow + i < rows; i++) {
var cells = tab.rows[startRow + i].cells.length; //該行總列數(shù)
for(var j = 0; j < cellArr[i].length && startCell + j < cells; j++) {
var cell = tab.rows[startRow + i].cells[startCell + j];
$(cell).find(':text').val(cellArr[i][j]);
}
}
3.粘貼后很可能需要進(jìn)行表單驗(yàn)證或其他操作，可以以回調(diào)函數(shù)的形式實(shí)現(xiàn)吏饿。
最終代碼：
$.fn.pasteFromTable = function(cb) { //make it a jquery function
$(this).bind('paste', function(e) {
e.preventDefault(); //消除默認(rèn)粘貼
//獲取粘貼板數(shù)據(jù)
var clipboardData = window.clipboardData || e.originalEvent.clipboardData, // IE || chrome
data = clipboardData.getData('Text'),
//判斷表格數(shù)據(jù)是使用\n還是\r分行踪危，解析成行數(shù)組
rowArr = (data.indexOf(String.fromCharCode(10)) > -1) ?
data.split(String.fromCharCode(10)) :
data.split(String.fromCharCode(13)),
//根據(jù)\t解析單元格
cellArr = rowArr.filter(function(item) { //兼容Excel行末\n，防止粘貼出多余空行
return (item !== "")
}).map(function(item) {
return item. split(String.fromCharCode(9));
});
//輸出至網(wǎng)頁(yè)表格
var tab = $(e.target).parents('table')[0], //表格
td = $(e.target).parents('td'), //當(dāng)前單元格
startRow = td.parents('tr')[0].rowIndex, //當(dāng)前單元格行數(shù)
startCell = td[0].cellIndex, //當(dāng)前單元格列數(shù)
rows = tab.rows.length; //總行數(shù)
for (var i = 0; i < cellArr.length && startRow + i < rows; i++) {
var cells = tab.rows[startRow + i].cells.length; //該行總列數(shù)
for(var j = 0; j < cellArr[i].length && startCell + j < cells; j++) {
var cell = tab.rows[startRow + i].cells[startCell + j];
$(cell).find(':text').val(cellArr[i][j]);
if (cb) {cb(cell)};
}
}
})
}
上面代碼為了方便引用猪落，將方法綁在了jQuery.function中了贞远。只要調(diào)用表格jquery對(duì)象的pasteFromTable方法， 就可以華麗麗的實(shí)現(xiàn)多單元格復(fù)制了笨忌。
$('table').pasteFromTable(function(cell){
//cell 為當(dāng)前單元格dom
});
測(cè)試用例和完整代碼可移步github
