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，所以只使用第一个文件浏览。我检查一下，身份证也没事。我是否会使用像var test= $(this).parent().parent().parent();这样的方法来获取孩子的身份？我已经将这种方法用于我的开关按钮，它可以工作：

$('#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,

分辨：我在datatables中修复了问题

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个参数）。第四个是meta，它有一个名为row的字段，它是当前处理的行的索引。使用它来生成您的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

文件在数据表行

1 个答案: