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