D3.js过滤现有的html表

D3.js filter existing html table

本文关键字：html js 过滤 D3      更新时间：2023-09-26

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

如何使表重新呈现并仅显示满足filter func条件的行？

您可以使用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根据数据项的值而不是索引来匹配数据项。

相关文章：