Before, there was a function to import goods, but not directly import using Excel or documents, and then parse the data in the background. This time, the user directly copied the data in Excel into the text field, and the front end parsed the data into a two-dimensional array, and then sent it to the background to query the complete information. (The project is relatively old, using JSP + JQ completed). The number of columns per row is uncertain (but not important for the front end, as the number of columns in each row is the same anyway), but the column information is not necessarily all recorded.

In order to adapt to the project, I first thought of using the following way to display and process data

The following information is displayed:

<textarea type="text" id="inputInfo" value="">xxx</textarea>
Copy the code

About data processing:

// Convert the copied data into a two-dimensional array
 formaterValToJSON() {    var \_fmt = /\\t/;    var val = this.$\_inputInfo.val() || \_fmt;    if (val == this.$\_inputInfo\[0\].defaultValue) {      return false;
    }    var rowArr = val.split('\\n');    var _rowArr = \[\];    for (var i = 0, lenR = rowArr.length; i < lenR; i++) {      if (rowArr\[i\] == ' ' || rowArr\[i\].replace(/\\t/g.' ') = =' ') {        continue;
      }      var colArr = rowArr\[i\].split(\_fmt);      var \_colArr = \[\];      for (var j = 0, lenC = colArr.length; j < lenC; j++) {
        _colArr.push(colArr\[j\]);
      }
      \_rowArr.push(\_colArr);
    }    if (_rowArr.length == 0) {      return false;
    }    return _rowArr;
}
Copy the code

This approach can quickly achieve the desired effect, but the data processing after the import is more troublesome in the project, but this step of operation development is very fast.

However, it also has limitations. Only the data copied by users from Excel was considered. At that time, there was no test to see whether the table from Word was an effect. The content that the user copies to the text field is also irregular. After all, it is just a Textarea. There is no style related display operation.

Visible, simple to complete, as a result of limitations is too big, and the interaction experience also is not very good, the user can’t in the text field inspection data, because the column is not recorded, may also have different length, so that each column is not aligned, there is no way to check the data, after can click import again and see if it is right…

So, in order to look good, I chose the UEditor rich text editor I used, and happily implemented it step by step…

First introduce the necessary files:

<script type="text/javascript" charset="utf-8" src=".. /ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
Copy the code

Then add a text field (id, div) :

<textarea id="inputInfo" type="text/plain"></textarea>
Copy the code

Then we initialize our rich text editor:

ueditor = UE.getEditor('inputInfo', {  toolbars: \ [\ ['fullscreen'.'undo'.'redo'.'selectall'.'searchreplace'.'cleardoc'.'preview'\]
  \],  autoHeightEnabled: false.autoFloatEnabled: true.initialFrameWidth: 850.elementPathEnabled: false.wordCount: false.enableContextMenu: true.autotypeset: {    removeEmptyline: true.clearFontSize: true.clearFontFamily: true
  },  retainOnlyLabelPasted: true.initialContent: 'xxx'.autoClearinitialContent: true});
ueditor.ready(function() {  var height = $(window).height() - $("#inputInfo").offset().top - 50;
  ueditor.setHeight(height);
  $(".edui-editor-messageholder.edui-default").css({ "visibility": "hidden" });
  UE.dom.domUtils.on(ueditor.body, 'keydown'.function(e) {    var keyCode = e.keyCode || e.which;    if (e.ctrlKey && keyCode == 86) {
      ctrlV = true; }}); }); UE.getEditor('inputInfoShow').addListener('contentChange'.function() {  // It is not friendly to trigger events if the content changes, so it is appropriate to trigger events only when pasting content
  if (ctrlV) {
    THISPAGE.formaterValToHTML();
    ctrlV = !ctrlV;
  }
});
Copy the code

I only kept a few toolbar tools because I didn’t need them here, so I chose a few that I could use, and the initial configuration also configured what I needed to use. For configuration, see Document editor initialization Configuration, Toolbar Configuration.

After that, everything was ok.

By the way, there is a listening keyboard event in the middle, because I just want to process the data when the user copies, because the display here must be a table, so I think no one will be bored to do this to play, but to achieve the purpose of function use. So even if I want to add data, I can insert rows, and then I’ll just extract the data from the table. If it’s not replication time to change the data, then you don’t have to continue to trigger events, no need.

Everything is OK, copy and display is OK, but when submitting data, I feel uncomfortable, before using the style to save, there is no need to do data processing, after all, when we display directly take and display HTML, there is nothing to deal with.

Now I need to deal with the table data, and the built-in getContentTxt() doesn’t do the trick because it can only fetch text, whereas I need an array….

So, I opened the data processing code to write……

var val = ueditor.getContent();Val = val.replace(/<(\\/)? Val = val.replace(/<(\\/)? (p|br|span|strong|div)(\\/)? >/g, ''); console.log(val)var inputData = \[\];
val.replace(/<tr.*<\\/tr>/g, function() { var trArr = arguments\[0\].split('</tr>'); for (var i = 0, lenTR = trArr.length; i < lenTR; i++) { var flag = false; _trDataArr = \[\]; var item = trArr\[i\]; if (item == '') { continue; } item.replace(/
      
       /g, function() { var tdArr = arguments\[0\].split('
      *</td>'); for (var j =0, lenTD = tdArr.length; j < lenTD; j++) { var ele = tdArr\[j\]; if (ele == '') { continue; } var str = ele.replace(/
      
       /ig, '
      *>'); if (! flag && str ! = '') { flag = true; } _trDataArr.push(str); }}); // Blank line skips if (flag) {inputData.push(_trDataArr); }}}); return inputData;Copy the code

In this way to extract the table inside the data and format into a two-dimensional array……

But there are also limitations, only applicable to the table copied from everywhere, if not the table, or in the previous listener function where the first format into a two-dimensional array, and then splicted out an HTML display back to the line……. At the same time, the format of the replication needs to be limited, otherwise there is no need to do anything other than table replication data processing…..

It is not necessary to use Excel to handle it, and it is also very convenient. I think no one chooses to use a large chunk of irregular text to store their multi-row and multi-column information

I thought it might not be suitable for this kind of scene, so I didn’t try it.

Hope everybody big guy advice, so can optimize, O(∩_∩)O ha ~~~