1

所以我有一个用 d3 创建的 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

    })

如何使表格重新呈现并仅显示满足过滤器功能条件的行？

4

1 回答 1

0

您可以使用 D3 的过滤器功能来过滤选择。然后您可以像往常一样对过滤后的选择进行操作，例如将其删除。所以你的代码看起来像这样（假设你的过滤器函数为你想要保留的元素返回 true）。

@rows.filter((d) -> !@filterFunc(toFilter, d))
     .remove()

或者，您可以在将数据传递给之前过滤数据.data()，然后对选择进行操作。

@rows = @tbody.selectAll("tr")
          .data(@collection.models.filter((d) -> !@filterFunc(toFilter, d)), (d) -> d)
@rows.exit().remove()
@rows.enter().append("tr")...

我在.data()这里的函数中添加了第二个参数，以告诉 D3 通过数据项的值而不是索引来匹配数据项。

于 2013-07-02T18:34:21.103 回答