jquery datatable - 선택한 레코드 아래에 jquery UI 모달 배치

Question

사용자가 jquery datatable에서 행을 클릭 할 때마다 jqueryui 모달을 표시 할 수 있으며 아래 주어진 예제를 따르고 있습니다.

https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html

내가 선택한 행 아래의 모달 대화 상자를 배치 할 수 있습니다, 어쨌든이 있나요?

기대 :

내 코드 : 나는 아래 그림과 같이 위치를 설정하려고

. 그러나 예상대로 작동하지 않습니다. 선택된 datatable 레코드의 위치를 ​​jquery UI 모달 대화 상자에 전달/할당하는 방법은 무엇입니까?

responsive: { 
      details: { 
       display: $.fn.dataTable.Responsive.display.modal({ 
        header: function() { 
         return 'View Record'; 
        }, 
        dialog: {       
         modal: true, 
         width: 800, 
         resizable: false, 
         position: { my: "left top", at: "left bottom", of: $(tableId) }, 
         create: function (event, ui) { 

         }, 
         open: function (event, ui) { 

         } 
        } 
       }), 

모든 제안/권장 사항에 감사드립니다.

Answer 1

문서에서 약간 명확하지 않지만 row이 헤더 함수에 전달 된 것으로 보입니다. 대화 상자의 위치 설정에서이 값을 목표로 삼고 싶습니다. 이벤트 오브젝트에 접근 할 수있는 것처럼 보이지 않습니다. modal 오브젝트에 전달할 수있는 변수에 row을 전달할 수 있습니다. 즉 row()의 결과 - 작용되고있는 행과 미리 채워집니다 문제의 테이블 https://datatables.net/reference/option/responsive.details.display

DataTables의 API 인스턴스 :

$(document).ready(function() { 
    var myRow; 
    $('#example').DataTable({ 
     responsive: { 
      details: { 
       display: $.fn.dataTable.Responsive.display.modal({ 
        header: function (row) { 
         myRow = row; 
         console.log("My Row:", myRow); 
         return 'View Record'; 
        }, 
        modal: { 
         modal: true, 
         width: 800, 
         resizable: false, 
         position: { 
          my: "left top", 
          at: "left bottom", 
          of: $(myRow) 
         } 
        } 
       }) 
      } 
     } 
    }); 
}); 

하면 더 볼 수 있습니다.

myRow으로 전달되는 개체 나 매개 변수를 확인한 후에는 위치 매개 변수를 조정해야 할 수 있습니다.