2017-08-08 112 views
0

我正在處理Jquery DataTables傳統項目。我正在嘗試添加一項功能。如果我點擊一行來顯示它的細節,我可以通過打開另一行來自動關閉同一行。 現在的邏輯是我可以一次打開多行,但必須點擊同一行來關閉它。JQuery DataTable:一旦我打開/點擊另一行,關閉一個打開的行

... 
    eventsTableOpenDetails[0] = openBtn; //html image 
     eventsTableOpenDetails[1] = nTr;  // current inner tr 
    ..... 

     if(eventsTable.fnIsOpen(nTr)){ 
      openBtn.src = "images/details_open.png"; 
      eventsTable.fnClose(nTr); 
     } 
     else { 
      var aData = eventsTable.fnGetData(nTr); 
      var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; border: 1px solid black; width: 100%; word-wrap:break-word;table-layout: fixed;">'; 
      sOut += '<tr><td style="width:10%">Cnt:</td><td>' + aData[1] + '</td></tr>'; 
      sOut += '<tr><td style="width:10%">Time:</td><td>' + aData[2] + '</td></tr>'; 
      sOut += '<tr><td style="width:10%">Type:</td><td>' + aData[3] + '</td></tr>'; 
      //sOut += '<tr><td style="width:10%">Field 5:</td><td>' + aData[5] + '</td></tr>'; 
      sOut += '<tr><td style="width:10%">Details:</td><td><pre>' + aData[6] + '</pre></td></tr>'; 
      sOut += '<tr><td style="width:10%"></td><td></td></tr>'; 
      sOut += '<tr><td style="width:10%"></td><td><button id="btnClientInject" class="btn btn-warning pull-right" onclick="injectData(' + position + ');" >Inject</button></td></tr>'; 
      sOut += '</table>'; 


      openBtn.src = "images/details_close.png"; 
      eventsTable.fnOpen(nTr, sOut, 'details'); 

     } 

我看那個解決同樣的問題,但不知道瀏覽器是怎麼知道的變量「PTR」是的DOM之前點擊事件前一個問題。 JQuery Datatables Close Each Open Row with fnClose()

謝謝。

編輯:pTr指向當前nTr。我以前沒有意識到,這個解決方案爲我工作。

回答

0

我能找出我做錯了什麼這裏是正確的代碼:

//store state of open rows 
//global variables 
var currentExpanded; 
var currentExpandedImg; 

if(eventsTable.fnIsOpen(currentExpanded) && currentExpanded!=nTr){ 

     currentExpandedImg.src = "images/details_open.png"; 
     eventsTable.fnClose(currentExpanded); 

    } 
    if(eventsTable.fnIsOpen(nTr)){ 

     openBtn.src = "images/details_open.png"; 
     eventsTable.fnClose(nTr); 
    } 
    else { 
     var aData = eventsTable.fnGetData(nTr); 
     var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="attribute=isClose; padding-left:50px; border: 1px solid black; width: 100%; word-wrap:break-word;table-layout: fixed;">'; 
     sOut += '<tr><td style="width:10%">Cnt:</td><td>' + aData[1] + '</td></tr>'; 
     sOut += '<tr><td style="width:10%">Time:</td><td>' + aData[2] + '</td></tr>'; 
     sOut += '<tr><td style="width:10%">Type:</td><td>' + aData[3] + '</td></tr>'; 
     //sOut += '<tr><td style="width:10%">Field 5:</td><td>' + aData[5] + '</td></tr>'; 
     sOut += '<tr><td style="width:10%">Details:</td><td><pre>' + aData[6] + '</pre></td></tr>'; 
     sOut += '<tr><td style="width:10%"></td><td></td></tr>'; 
     sOut += '<tr><td style="width:10%"></td><td><button id="btnClientInject" class="btn btn-warning pull-right" onclick="injectData(' + position + ');" >Inject</button></td></tr>'; 
     sOut += '</table>'; 


     openBtn.src = "images/details_close.png"; 
     currentExpandedImg = openBtn; 
     eventsTable.fnOpen(nTr, sOut, 'details'); 
     currentExpanded = nTr; 
    } 
相關問題