だから私はいくつかの入力でキーダウンをフィルタリングするテーブルを持っています。次に、残りの行を並べ替えようとしています。私は多くのことを試しました.以下の試みは、@行のものでテーブルを作成し、バックボーンモデルが添付されている同じ要素に対して別の選択を使用してソートしようとするという考えに基づいています(必要です他の理由でバックボーン モデルが必要です)。
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)=>
return d
).remove()
@rows = @tbody.selectAll("tr").data(@collection.models).enter().append("tr")
@rows.filter((d)=>
if @filterFunc(toFilter,d)
return d
).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
)
# @currentlyDisplayedRows = @tbody.selectAll("tr").data(@collection.models.filter((d)=>
# console.log "TO FILTER"
# console.log toFilter
# if @filterFunc(toFilter,d)
# console.log d
# return d
# )).exit().remove()
@currentlyDisplayedRows = @tbody.selectAll("tr").data(@collection.models).filter((d)=>
if @filterFunc(toFilter,d)
return d
).remove()
),1000)
)
@columns = @json["Columns"]
@initializeSortingFunctionManager(@columns)
@thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>
@currentlyDisplayedRows.sort((x,y)=>
xVal = x.get(d)
yVal = y.get(d)
func = @sortingFunctionManager[d](xVal,yVal)
return func
)
)
@tbody.selectAll("tr").attr("class","spacing center-text")
@renderTableBody()
また、上記の方法では、d3 エラーが発生します - null の insertBefore を呼び出すことはできません。
このコードの何が問題なのですか / フィルター処理されたデータの並べ替えを行うにはどうすればよいですか?
アップデート-
わかりましたデバッガーを使用してステップスルーしました。ステップスルーすると、並べ替えが機能していることに気付きましたが、クリック関数の最後の実行ポイントに到達すると、テーブル全体が元の形式で再レンダリングされました。