2015-06-22 74 views
0

我正在使用Datatables.js(使用JSNI)來顯示和隱藏我的表的行信息(它是使用Google web創建的toolkit-gwt celltable)。我的要求是點擊按鈕我需要迭代表和顯示/隱藏信息,但它不工作。子行(顯示額外/詳細信息) - 無法顯示錶中的子行

下面是我的代碼:

function format(d) { 
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' 
        + '<tr>' 
        + '<td>Full name:</td>' 
        + '</tr>' + '</table>' 
;} 


$wnd.$(function() { 
    var table = $wnd.$('#example').DataTable({ 
     "columns" : [ 
      { 
       "orderable" : false, 
       "data" : null, 
       "defaultContent" : '' 
      }, 
      { 
       "data" : "firstName" 
      }, 
      { 
       "data" : "middleName" 
      }, 
      { 
       "data" : "lastName" 
      }, 
      { 
       "data" : "age" 
      }, 
      { 
       "data" : "empId" 
      }, 
      { 
       "data" : "address" 
      } 
     ], 
     "order" : [ [ 1, 'asc' ] ] 
    }); 

    $wnd.jQuery('#btnId').click(function() { 
     $wnd.$("#example tbody tr").each(function(i) {     
      var rowNo = table.row(i); 

      if (rowNo.child.isShown()) { 
       // This row is already open - close it 
       console.log("hide-->"); 
       rowNo.child.hide(); 
      } 
      else { 
       console.log(rowNo.data()); 
       rowNo.child(format(rowNo.data())).show(); 
      } 
     }); 
    }); 
}); 

終於我看到了一個不同的是,這是使用GWT創建表以這種格式生成表結構。

<tr __gwt_row="0" __gwt_subrow="0" class="GEUXRR0CPC"> 
    <td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CBD"> 
     <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16" tabindex="0"> 
      xxx 
     </div> 
    </td> 
    <td class="GEUXRR0COC GEUXRR0CAD"> 
     <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17"> 
      yyy 
     </div> 
    </td> 
</tr> 

,因爲文本將在那裏裏面<div>這裏面<td>。如何解決這個問題?如何顯示/隱藏表格內的行?任何幫助?

注: 1)創建GWT CellTable 2)注入JS(Datatables.js)到CellTable通過JSNI展開或摺疊狀(https://www.datatables.net/examples/api/row_details.html

+0

我不明白你的問題。你使用Datatables.js或者你使用的是GWT Widget?究竟發生了什麼? –

+0

創建了GWT celltable並注入datatables.js來顯示/隱藏行,row.data()方法給出了未定義的異常。 –

回答

0

行他們的目的不是一起工作,無論是你創建一個使用Datatables.js的小部件,或者你只使用GWT小部件,我建議作爲一個起點,看看GWT Showcase的示例,它使用CellTableBuilder

僅供參考此問題已回答here


你可以讓他們發揮很好,但我懷疑有人試圖這樣做,你可以嘗試調試GWT代碼與SuperDev模式,看看究竟發生什麼事。

+0

謝謝安德烈您的答覆..我不能使用cellTablebuilder我試過這個以及...我需要一個靈活性添加不同的容器(Horizo​​ntalpanel,verticalpanel,表,行)作爲新的行.. –