D3.js過濾現有的html表

所以我有一個我用d3創建的html表，我試圖根據輸入框中的文本過濾結果。D3.js過濾現有的html表

現在我有：

filterFunc:(toFilter,model)-> 
    for column in @columns 
     if model.get(column) 
      if model.get(column).indexOf(toFilter) != -1 
       return true 
    return false 

renderTable:()=> 
    @table = d3.select("#search-results-area").append("table").attr("id",@tableId).attr("class","visualization-panel") 
    @thead = @table.append("thead") 
    @tbody = @table.append("tbody") 
    @input = @table.append("input").attr("id",@inputId).on("keydown",(d)=> 
     toFilter = $(@input[0][0]).val() 
     window.setTimeout((()=> 
      toFilter = $(@input[0][0]).val() 
      @rows.filter((d)=> 
        console.log "toFilter" 
        console.log toFilter 
        if @filterFunc(toFilter,d) 
         console.log d 
         return d 
       ) 

      console.log toFilter 
      ),1000) 

     ) 

    @columns = @json["Columns"] 
    @initializeSortingFunctionManager(@columns) 
    @thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>@tbody.selectAll("tr").sort(@sortingFunctionManager[d])) 
    @tbody.selectAll("tr").attr("class","spacing center-text") 
    @renderTableBody() 

renderTableBody:()=> 
    @rows = @tbody.selectAll("tr").data(@collection.models).enter().append("tr") 
    cells = @rows.selectAll("td").data((model)=> 
     return @columns.map((column)=> 
      return { column : column, val : model.get(column)} 
      ) 
     ).enter().append("td").text((d)=> 
      for column in @columns 
       if d.column == column 
        return d.val 
     ) 
    $("#" + @tableId).dataTable({ 
     "bScrollInfinite" : true, 
     "bScrollCollapse" : true, 
     "sScrollY" : "80%", 
     "sScrollX" : "80%", 
     "bFilter" : false, 
     "bInfo" : false 

    })

如何讓這個表重新呈現，並只顯示滿足過濾FUNC條件的行？

來源

2013-07-02 praks5432

您可以使用D3的filter function來篩選選擇。然後，您可以照常進行過濾選擇，例如去掉它。所以你的代碼看起來像這樣（假設你的過濾器函數爲你想保留的元素返回true）。

@rows.filter((d) -> [email protected](toFilter, d)) 
    .remove()

或者，你可以將它傳遞給.data()先篩選數據，然後在選擇操作。

@rows = @tbody.selectAll("tr") 
      .data(@collection.models.filter((d) -> [email protected](toFilter, d)), (d) -> d) 
@rows.exit().remove() 
@rows.enter().append("tr")...

我添加第二個參數來這裏.data()功能告訴D3通過自己的價值，而不是他們的指數相匹配的數據項。

來源

2013-07-02 18:34:21

所以我想通了 - 現在的問題是，當我打電話給退出（）我得到一個沒有方法的錯誤，這是不可思議的... – praks5432

nvm，我得到了 - 我現在想知道如何保持原始行？就像當我點擊退格鍵時，搜索應該重新執行，使用上面的代碼@rows似乎已經成爲過濾數據 – praks5432

在這種情況下，過濾數據會更容易，然後將它傳遞給'.data（）'並根據適當的選擇進行操作。我發佈的內容不會將新數據綁定到行，因此沒有'.exit（）'選擇。 –

D3.js過濾現有的html表

回答

相關問題