javascript - Python bokeh CustomJS 回调更新 DataTable 小部件

Question

如何使用 Select 小部件更新我的 DataTable 小部件的值？这是我的示例代码:

import pandas as pd
from bokeh.io import show
from bokeh.layout import column
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.models.widgets import DataTable, TableColumn

df = pd.DataFrame({'a': range(10,50), 'b': range(110,150)})

source_foo = ColumnDataSource(data=df.loc[df['a'] < 25])
source_bar = ColumnDataSource(data=df.loc[df['a'] > 25])
source_fill = ColumnDataSource(data=df.loc[df['a'] < 25])

table_columns = [TableColumn(field=i, title=i) for i in ['a', 'b']]

select = Select(title='Selected value:', value='foo', options=['foo', 'bar'])

update = CustomJS(args=dict(source_fill=source_fill, source_foo=source_foo,
        source_bar=source_bar), code="""

    var data_foo = source_foo.data;
    var data_bar = source_bar.data;
    var data_fill = source_fill.data;
    var f = cb_obj.value;
    var list = ['a', 'b']

    if (f == 'foo') {
        for(var i = 0, size = list.length; i < size ; i++) {
            var e = list[i];
            delete data_fill[e];
            data_fill[e] = data_foo[e];
        }
    }
    if (f == 'bar') {
        for(var i = 0, size = list.length; i < size ; i++) {
            var e = list[i];
            delete data_fill[e];
            data_fill[e] = data_bar[e];
        }
    }

    source_fill.change.emit();
    """)

select.js_on_change('value', update)

data_table = DataTable(source=source_fill, columns=table_columns, width=150,
    height=300, row_headers=False, selectable=False)

layout = column(select, data_table)

bio.show(layout)

如果selectable=False，则数据值不会改变。如果我设置 selectable=True 则刷新第一行。如果我对 DataTable 的其中一列重新排序(无论 selectable 如何)，则值将被刷新。如何强制自动刷新？

谢谢!

Answer 1

您可以将 source_fill.data 指针指向新数据:


如果(f=='foo'){
source_fill.data = source_foo.data;
}
if (f == '酒吧') {
source_fill.data = source_bar.data;
}