javascript - 数据表行内的文件浏览

Question

我正在使用datatables显示一些字段和两个文件上传按钮，如下所示。

我想单击“浏览”，然后在文件分割后调用 Web 服务将文件存储在服务器上，并在输入字段中的按钮旁边显示名称。问题是数据表是从 javascript 创建的:

function createDatatableTable(){
    if ( ! $.fn.DataTable.isDataTable( '#datatableTable' ) ) {
        datatableTable = $('#datatableTable').DataTable({
            responsive: true,
            columnDefs: [
                         {
                             targets: [3,4,5],
                             //set priority to column, so when resize the browser window this botton stay on the screen because have max priority
                             responsivePriority: 1,
                             orderable: false,
                             searchable: false,
                         }
                         ],
                         //fix problem with responsive table
                         "autoWidth": false,
            "ajax":{ 
                "url":  "datatable/" + $("#selectedCar").val(),
                "dataSrc": function ( json ) {
                    if (typeof json.success == 'undefined')
                        window.location.href = "/DART/500";
                    else if (json.success){
                        return json.result.data;
                    }else{
                        notifyMessage(json.result, 'error');   
                        return "";
                    }                           
                },  
                "error": function (xhr, error, thrown) {
                    window.location.href = "/DART/500";
                }
            },
            "columns": [
                        { "data": "date",
                            "render": function (data) {
                                return (moment(data).format("DD/MM/YYYY"));                  
                            }
                        },
                        { "data": "idShift" },
                        { data:null, render: function ( data, type, row ) {
                            return data.beginKm - initialKm;
                        }
                        },
                        { data:null, render: function ( data, type, row ) {
                            return '<div class="input-group"><span class="input-group-btn"><span class="btn btn-primary file-upload"> Browse&hellip; <input id="dat" type="file" name="file"/></span></span> <input id="datFileName" target="'+row.idAcquisition+'"  type="text" class="form-control" readonly="readonly"></div>'  
                        }
                        },
                        { data:null, render: function ( data, type, row ) {
                            return '<button type="button" class="btn btn-primary" id="otherFiles">Other</button>'

                        }
                        },
                        { data: "isShown", render: function ( data, type, row ) {
                         if (data) {
                             return '<input data="'+row.idAcquisition+'" type="checkbox" name="my-checkbox" checked>';
                         }
                         else {
                             return '<input data="'+row.idAcquisition+'" type="checkbox" name="my-checkbox">';
                         }
                        }   
                        },
                        ],
                        "fnDrawCallback": function() {
                         //Initialize checkbox for enable/disable user
                         $("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                        },
        });
    }
    else {
        datatableTable.ajax.url("datatable/" + $("#selectedCar").val()).load();
    }

通过这种方式，我为我必须写入的文本区域提供了一个唯一的 ID，但现在我如何知道单击的行？我用过:

//File dat upload
$('#datatableTable').on('change', 'input[name="file"]', function(event) {
        var input = $(this),
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        var fieldFileName="datFileName"+ document.getElementById("datFileName").getAttribute("target");
        document.getElementById(fieldFileName).value = label;
        //uploadFunction('dat');
});

但它总是返回相同的 ID，因此仅使用第一个文件浏览。我检查了一下，id没问题。我应该使用像 var test= $(this).parent().parent().parent(); 这样的方法并获取 child 的 id？我已将这种方法用于我的开关按钮，并且它有效:

$('#datatableTable').on('switchChange.bootstrapSwitch', 'input[name="my-checkbox"]', function(event, state) {
        //CSRF attribute for spring security
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            type : "POST",
            url : "status/" + $(this).attr('data') + "/" + state,

已解决:我使用数据表修复了问题

return '<div class="input-group"><span class="input-group-btn"><span class="btn btn-primary file-upload"> Browse&hellip; <input id="dat" type="file" name="file" target="'+row.idAcquisition+'"/></span></span> <input id="'+row.idAcquisition+'" type="text" class="form-control" readonly="readonly"></div>'

并使用

$('#datatableTable').on('change', 'input[name="file"]', function(event) {
        var input = $(this),
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        var test= $(this).attr('target');
        document.getElementById(test).value = label;
 //      uploadFunction('dat');
});

Answer 1

根据定义，元素 ID 在整个文档中必须是唯一的。因此

document.getElementById("datFileName")

和

$("#datFileName") // jQuery equivalent

只会返回具有给定 id 的第一个元素。看起来你的表中每一行都有相同的元素 ID。

<小时/>

以下是使 ID 唯一的方法:

columns.render函数有 4 个参数(尽管您只使用了其中 3 个)。第四个是元，它有一个名为行的字段，它是当前处理的行的索引。使用它来生成您的 ID:

...
{ data:null, render: function ( data, type, row, meta ) {
    var idDat = "dat" + meta.row;
    var idDatFN = "datFileName" + meta.row;
    return '<div class="input-group"><span class="input-group-btn"><span class="btn btn-primary file-upload"> Browse&hellip; <input id="'+id+'" type="file" name="file"/></span></span> <input id="'+idDatFN+'" target="'+row.idAcquisition+'"  type="text" class="form-control" readonly="readonly"></div>'  
}
...

<小时/>

此方法的另一种可能更简洁的替代方法是根本不提供字段 ID，而是将它们作为同级及其 :nth-of-type(n) 选择器进行引用。考虑阅读 jQuery 文档。

示例:

$('#datatableTable').on('change', 'input[name="file"]', function(event) {
    var input = $(this),
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    // find the input's first ancestor with class input-group and inside it
    // look for an input of type=text. then set its value
    input.parent(".input-group").find("input[type=text]").val(label);
});

<小时/>

与实际问题无关，但您也使用了错误的数据属性。而不是

<element data="bar" />

你应该使用

<element data-foo="bar" />

这样你就可以在每个元素上拥有多个数据属性，并且可以通过 jQuery 轻松访问它们，如下所示:

$("element").data("foo") // getter
$("element").data("foo", "no bar") // setter