所以我有一个用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

    })


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

最佳答案

您可以使用D3的filter function来过滤选择。然后,您可以像平常一样对过滤的选项进行操作,例如去掉它。因此您的代码看起来像这样(假设您的过滤器函数对要保留的元素返回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根据数据项的值而不是索引来匹配数据项。

关于javascript - D3.js过滤现有的html表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17433034/

10-12 00:13
查看更多