Datatables 자식 행 양식

Question

예를 들어, 자식 행 안에 this을 사용하고 있는데, 양식이 있습니다. 문제는 자식 행이 닫힌 경우 자식 행의 입력을 제출하지 않는다는 것입니다. show() 및 hide() 기능을 자신의 예제의 코드와 같이 : 그 날은 그냥 그것을 숨기고 숨겨진 때, 여전히이 있어야 그것을 보여주는 및 제출 생각하게 지금

if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     // Open this row 
     row.child(format(row.data())).show(); 
     tr.addClass('shown'); 
    } 

지금은 datatables가 사용 참조 , 아마도 그들은 datatables 함수를 사용하고 있기 때문에가 아닙니다. 자식 행이 "숨겨져있을 때"자식 행의 입력 필드를 실제로 제출할 수있는 방법은 무엇입니까? 행을 열면 제대로 작동합니다.

Answer 1

불행히도 JQuery DataTables는 필요한 정보를 얻는 방법을 제공하지 않으며, 또한 DOM에서 숨겨진 행을 제거합니다.

var dataSet = [ 
 
    { 
 
    "id" : 1, 
 
    "name" : "Tiger Nixon", 
 
    "position" : "Edinburgh", 
 
    "salary" : "5421" 
 
    }, 
 
    { 
 
    "id" : 2, 
 
    "name" : "Ludovico Moro", 
 
    "position" : "Milan", 
 
    "salary" : "8670" 
 
    }, 
 
    { 
 
    "id" : 3, 
 
    "name" : "Julio Iglesias", 
 
    "position" : "Madrid", 
 
    "salary" : "12500" 
 
    } 
 
]; 
 

 
var fullnames = []; 
 

 
$(document).ready(function() { 
 
    var table = $('#example').DataTable({ 
 
     "data": dataSet, 
 
     "columns": [ 
 
      { 
 
       "className": 'details-control', 
 
       "orderable": false, 
 
       "data": null, 
 
       "defaultContent": '' 
 
      }, 
 
      { "data": "name" }, 
 
      { "data": "position" }, 
 
      { "data": "salary" } 
 
     ], 
 
     "order": [[1, 'asc']] 
 
    }); 
 
    
 
    // Add event listener for opening and closing details 
 
    $('#example tbody').on('click', 'td.details-control', function() { 
 
     var tr = $(this).closest('tr'); 
 
     var row = table.row(tr); 
 
    
 
     if (row.child.isShown()) { 
 
      // This row is already open - close it 
 
      row.child.hide(); 
 
      tr.removeClass('shown'); 
 
     } 
 
     else { 
 
      // Open this row 
 
      row.child(format(row.data())).show(); 
 
      tr.addClass('shown'); 
 
     } 
 
    }); 
 
    
 
}); 
 

 
function format (d) { 
 
    // `d` is the original data object for the row 
 
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
 
     '<tr>'+ 
 
      '<td>Full name:</td>'+ 
 
      '<td><input type="text" class="fullname" id="' + d.id + '" value="' + d.name + '" onchange="javascript:inputChange(this.id, this.value)"></td>'+ 
 
     '</tr>'+ 
 
    '</table>'; 
 
} 
 

 
$("#form1").submit(function(event) { 
 
    $.each(fullnames, function(index, value){ 
 
    if(fullnames[index]){ 
 
     console.log("Modified record " + index + ", new value is: " + value); 
 
    } 
 
    }); 
 
    event.preventDefault(); 
 
}); 
 

 
function inputChange(id, val){ 
 
    fullnames[id] = val; 
 
}

td.details-control { 
 
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center; 
 
    cursor: pointer; 
 
} 
 
tr.shown td.details-control { 
 
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<form id="form1"> 
 
    <table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th></th> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 
     <tfoot> 
 
      <tr> 
 
       <th></th> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Salary</th> 
 
      </tr> 
 
     </tfoot> 
 
    </table> 
 
    <input type="submit"> 
 
</form>

은 요약하면 :

그래서, 당신이 할 수있는 유일한 방법은 다음과 같은 몇 가지 변수에 세부 행에서 수정 된 값을 저장하고에 읽을 제출, 확인하시기 바랍니다있다 :

1)는 fullnames를 저장하는 글로벌 VAR를 선언

var fullnames = []; 

,691 363,210

2) 함수 format에 제출 청취자

4

function inputChange(id, val){ 
    fullnames[id] = val; 
} 

) 마지막에 그 값을 읽기를 생성 입력란

onchange="javascript:inputChange(this.id, this.value)" 

3)에 onchange를 수신기를 추가

$.each(fullnames, function(index, value){ 
     if(fullnames[index]){ 
      console.log("Modified record " + index + ", new value is: " + value); 
     } 
     }); 

분명히 fullnames 배열 대신 필요한 모든 필드를 포함하는 객체의 배열을 저장할 수 있습니다.

안녕하세요. 안녕하세요.