添加将Excel数据粘贴到Django表单的功能

Adding the ability to paste Excel data into Django form

本文关键字:Django 表单 功能 Excel 数据 添加      更新时间:2023-09-26

我目前有一个 Django 表单,它有 N 行 x 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(/[-'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]);
    }
});

我以为这会起作用,但不幸的是它没有。 想知道是否有人有任何建议。

粘贴事件在将数据粘贴到输入字段之前触发,因此无法使用 $(this).val() 获取粘贴的文本。您需要访问事件对象的剪贴板数据属性。

由于 jQuery 在其事件对象中不包含剪贴板数据,因此您需要从 originalEvent 字段中获取它。

事件处理程序如下所示。

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
}

为了更加可靠,您应该在继续之前查询剪贴板数据以确保它具有文本/纯表示形式。

在IE中,看起来这就是您阅读剪贴板的方式。

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