電商網(wǎng)站的后臺(tái)總少不了各種繁雜數(shù)據(jù)的錄入，旁邊的運(yùn)營妹子錄完第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ù)為以行和單元格分開的數(shù)組，然后按照表格格式輸出到input的value中。
開發(fā)過程中遇到的問題總結(jié)起來主要有三個(gè)：
1.對粘貼板中表格數(shù)據(jù)的拆分需要兼容不同軟件的復(fù)制格式。IOSNumbers，WindowsExcel和IOSExcel之間都有細(xì)微的差別。
表格軟件在復(fù)制數(shù)據(jù)時(shí)，通過制表符
\t來分隔行內(nèi)不同單元格數(shù)據(jù),通過換行符\n或回車符\r來分隔不同行的數(shù)據(jù)。我們在測試中通過console.log打印數(shù)據(jù)，這些轉(zhuǎn)義符會(huì)自動(dòng)轉(zhuǎn)換成空格或換行，為使這些轉(zhuǎn)義符通過字符的形式直接輸出，我們需要對數(shù)據(jù)進(jìn)行簡單的轉(zhuǎn)碼，將\t替換成\\\\t，以此類推。
測試代碼如下：
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ù)制格式測試結(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ù)，因此我們在進(jìn)行行或列的循環(huán)‘粘貼’時(shí)，除了判斷循環(huán)數(shù)i／j小于復(fù)制數(shù)據(jù)的行／列數(shù)外，還要判斷當(dāng)前所在行／列是否小于表格的總行／列數(shù)；
最終代碼如下：
//輸出至網(wǎng)頁表格
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)頁表格
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對象的pasteFromTable方法， 就可以華麗麗的實(shí)現(xiàn)多單元格復(fù)制了。
$('table').pasteFromTable(function(cell){
//cell 為當(dāng)前單元格dom
});
測試用例和完整代碼可移步github
