添加将Excel数据粘贴到Django表单中的功能 [英] Adding the ability to paste Excel data into Django form

问题描述

我目前拥有一个Django表单，它具有N行×12列文本框的形状。用户可以一次填写此表单一个文本框：

[________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________] [________ ] [________] [________] [________]

注意：此表仅显示9列，但我使用的实际形式为12。 >

我想添加用户在Excel中复制一系列单元格的能力，并粘贴到填充相应单元格的表单中。

我尝试模拟一个我已经成功创建的方法的语法，可以在单击表单上的清除按钮后清除所有数据字段：

  $（document）.on（click，#clear_button，function（）{
 $（input [type = text]）。 val（）; 
}）; 
  

来自Excel的单行数据是分页式的，这与我'已经得到：

  $（document）.on（paste，input [type = text]，function {
 var input_id = $（this）.attr（id）; 
 var value = $（this）.val（）; 
 var value_split_array = value.split（\ t）; 
 var row_selected = input_id.match（/（[ -  \w] +）_ \d + /）[1]; 
 var num = parseInt（input_id.match对于（i = num; i< value_split_array.length-1 || i< 12; i ++）{
 $（[id =+ row_selected +_+ i +]）val（value_split_array [i-num]）; 
} 
}）; 
  

我以为这可以工作，但不幸的是没有。想知道有没有人有任何建议。

解决方案

粘贴事件在数据粘贴到输入字段之前触发，所以你可以'使用 $（this）.val（）获取粘贴的文本。您需要访问事件对象的clipboardData属性。

由于jQuery在其事件对象中不包含clipboardData，因此需要从originalEvent字段获取。 / p>

您的事件处理程序将如下所示。

  function（event） {
 var input_id = $（this）.attr（id）; 
 var value; 
 if（event.originalEvent.clipboardData）{// Firefox，Chrome等
 value = event.originalEvent.clipboardData.getData（'text / plain'）; 
} else if（window.clipboardData）{// IE 
 value = window.clipboardData.getData（Text）
} else {
 //剪贴板不可用这个浏览器
 return; 
} 
 / * ... * / 
 event.preventDefault（）; //阻止原始的粘贴
} 
  

为了更强大，您应该查询剪贴板数据确保在继续之前有一个文本/简单的表示。

在IE中，它看起来像这是你如何阅读剪贴簿。

  var value = window.clipboardData.getData（Text）; 
  

I currently have a Django form that has N rows by 12 columns textboxes in the shape of a table. Users are able to populate this form one text box at a time:

[________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________]

Note: this table only shows 9 columns, but the actual form I am using is 12.

I would like to add the ability for users to copy a range of cells in Excel and paste into the form filling up the appropriate cells.

I tried to mimic the syntax for a method that I have successfully created which is able to clear all data fields after clicking the clear button on the form:

$(document).on("click", "#clear_button", function() {
    $("input[type=text]").val("");
});

The data coming from Excel for a single row is tabbed delimited and this is about as far as I've gotten:

$(document).on("paste", "input[type=text]", function(){
    var input_id = $(this).attr("id");
    var value = $(this).val();
    var value_split_array = value.split("\t");
    var row_selected = input_id.match(/([-\w]+)_\d+/)[1];
    var num = parseInt(input_id.match(/[-\w]+_(\d+)/)[1], 10);
    for (i=num; i < value_split_array.length-1 || i < 12; i++) {
        $("[id="+row_selected+"_"+i+"]").val(value_split_array[i-num]);
    }
});

I thought this would work, but unfortunately it did not. Wondering if anyone has any suggestions.

解决方案

The paste event fires before the data is pasted into the input field, so you can't get the pasted text using $(this).val(). You need to access the clipboardData property of the event object.

Since jQuery doesn't include clipboardData in its event object, you need to get it from the originalEvent field.

Your event handler would look like this.

function (event) {
    var input_id = $(this).attr("id");
    var value;
    if (event.originalEvent.clipboardData) { // Firefox, Chrome, etc.
        value = event.originalEvent.clipboardData.getData('text/plain');
    } else if (window.clipboardData) { // IE
        value = window.clipboardData.getData("Text")
    } else {
        // clipboard is not available in this browser
        return;
    }
    /* ... */
    event.preventDefault(); // prevent the original paste
}

To be more robust, you should query clipboardData to ensure it has a text/plain representation before proceeding.

In IE, it looks like this is how you read the clipboard.

var value = window.clipboardData.getData("Text");

这篇关于添加将Excel数据粘贴到Django表单中的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！