Dosya içeri veri dolaşımı satırı

Question

Bazı alanları ve aşağıdaki gibi iki dosya yükleme düğmesini göstermek için datatables kullanıyorum.

Ben browse tıklayın ve ardından, dosya secetion sonra, giriş alanına, sunucudaki dosyayı depolamak ve düğmenin yanındaki adını göstermek için bir web hizmeti çağırmak istiyorum. sorun Datatable javascript oluşturulur olmasıdır: Ben yazmak zorunda ama şimdi nasıl satır tıklandığında bilebilirim metin alanına bir benzersiz kimliği verdik Bu şekilde

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(); 
    } 

?

//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'); 
}); 

ama hep aynı kimliği bu yüzden sadece ilk dosya Gözat'ı kullanın döndürür: ben kullandım. Kontrol ederim ve kimlik doğru. var test= $(this).parent().parent().parent(); gibi bir yaklaşımı kullanabilir ve çocuğun kimliğini alabilir miyim? benim anahtar düğmesi için bu yaklaşımı kullanmış ve çalışır:

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

ÇÖZÜLDÜ: Ben

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

Başına kullanarak 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>' 

ve kullanma sorunu çözmek Tanım bir öğe kimliği tüm belge boyunca benzersiz olmalıdır. Bu nedenle

document.getElementById("datFileName") 

ve

$("#datFileName") // jQuery equivalent 

sadece verilen kimliğe sahip ilk öğesini döndürür. Tablonuzda her satırın içinde aynı eleman kimliğine sahip olduğu görülüyor. (Eğer sadece 3 tanesi kullandığınız rağmen)

columns.render fonksiyon 4 argümanları verilir: Burada

---

Eğer benzersiz kimlikler yapabilirsiniz nasıl. Dördüncü meta ve row adlı bir alanı vardır, bu, şu anda işlenen satır için bir dizin. Kimliğinizi oluşturmak için bunu kullanın:

... 
{ 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>' 
} 
... 

---

alternatif muhtemelen daha temiz kardeşleri ve onların :nth-of-type(n) seçicileri olarak başvuran ancak hiç alanlar kimliklerini vererek değil mi bu yaklaşıma. Bunun için jQuery dokümanlarını okumayı düşünün.

Örnek:

$('#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); 
}); 

---

gerçek sorunu ile ilgili değil, ama aynı zamanda verileri yanlış özelliğini kullanıyoruz.Bunun yerine

<element data="bar" /> 

size birden fazla veriye sahip olabilir

<element data-foo="bar" /> 

Bu şekilde kullanmalıdır her öğe üzerinde nitelikleri ve böyle jQuery aracılığıyla kolayca erişebilirsiniz: Eğer varsa

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