Javascript 链接到Select小部件的Bokeh数据表

我试图创建一个Bokeh数据表，该表使用customJS回调链接到一个select小部件。其思想是，当我更改select时，数据表将更新为仅显示与所选select值对应的相关行。我的代码如下：

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS


output_file("CatDog.html")




select = Select(title="Animal", options=["Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog",],Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

filteredSource = ColumnDataSource(data=dict(Animal=[],Breed=[]))

columns = [TableColumn(field="Animal",title="Animal"),TableColumn(field="Breed",title="Breed",sortable=True)]

callback = CustomJS(args=dict(source=source,filteredSource = filteredSource), code="""
var data = source.data;
var f = cb_obj.value;
var d2 = filteredSource.data;
d2['Animal']=[]
d2['Breed']=[]


for(i = 0; i < data['Animal'].length;i++){

if(data['Animal'][i]==f){

    d2['Animal'].push(data['Animal'][i])
    d2['Breed'].push(data['Breed'][i])
}

}

alert(d2['Breed'])
filteredSource.change.emit()

""")

select.js_on_change('value',callback)

data_table=DataTable(source=filteredSource,columns=columns )
data_table_unfiltered=DataTable(source=source,columns=columns )
show(widgetbox(data_table,select,data_table_unfiltered))

从bokeh.io导入输出文件，显示
从bokeh.layouts导入widgetbox
从bokeh.models.widgets导入选择、数据表、表列
从bokeh.models.sources导入ColumnDataSource，CDSView
从bokeh.models导入CustomJS
输出文件（“CatDog.html”）
选择=选择（title=“Animal”，options=[“猫”、“狗”]）
source=ColumnDataSource（数据=dict（动物=[“猫”、“猫”、“猫”、“猫”、“狗”、“狗”、“狗”、“狗”），品种=[“暹罗人”、“波斯人”、“孟加拉人”、“缅甸人”、“实验室”、“金色”、“贵宾犬”、“哈巴狗]））
filteredSource=ColumnDataSource（数据=dict（动物=[]，品种=[]））
columns=[TableColumn（field=“Animal”，title=“Animal”），TableColumn（field=“bride”，title=“bride”，sortable=True）]
callback=CustomJS（args=dict（source=source，filteredSource=filteredSource），code=“”
var数据=source.data；
var f=cb_对象值；
var d2=filteredSource.data；
d2['Animal']=[]
d2['品种]=[]
对于（i=0；i

---

警报会正确显示我期望的行，具体取决于选择的类别，但“filteredSource”数据表不会更新，而是保持空白。任何指导都将不胜感激

这似乎是可行的，您需要触发对数据表本身的更改。这个问题在这里之前已经被问过了：

尽管如此，将代码稍微调整到下面的位置可以解决问题（使用Bokeh0.12.14）

从bokeh.io导入输出文件，显示
从bokeh.layouts导入widgetbox
从bokeh.models.widgets导入选择、数据表、表列
从bokeh.models.sources导入ColumnDataSource，CDSView
从bokeh.models导入CustomJS
输出文件（“CatDog.html”）
选择=选择（title=“Animal”，options=[“猫”、“狗”]）
source=ColumnDataSource（数据=dict（动物=[“猫”、“猫”、“猫”、“猫”、“狗”、“狗”、“狗”、“狗”），品种=[“暹罗人”、“波斯人”、“孟加拉人”、“缅甸人”、“实验室”、“金色”、“贵宾犬”、“哈巴狗]））
filteredSource=ColumnDataSource（数据=dict（动物=[]，品种=[]））
columns=[TableColumn（field=“Animal”，title=“Animal”），
TableColumn（field=“bride”，title=“bride”，sortable=True）]
数据表=数据表（源=filteredSource，列=columns，宽度=800）
数据\u表\u未筛选=数据表（源=源，列=列，宽度=800）
callback=CustomJS（args=dict（source=source，
filteredSource=filteredSource，
数据表=数据表），代码为“”
var数据=source.data；
var f=cb_对象值；
var d2=filteredSource.data；
d2['Animal']=[]
d2['品种]=[]
对于（i=0；i

以下是使用CDSView、BooleanFilter更新的答案。 与Bokeh 2.2.3一起运行

from bokeh.models import CDSView, BooleanFilter
from bokeh.io import show, output_notebook
from bokeh.layouts import column
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS

output_notebook()

select = Select(title="Animal", options=["All","Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog"],
                                  Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

booleans = [True for i in source.data['Animal']]
view1 = CDSView(source=source, filters=[BooleanFilter(booleans)])

columns = [TableColumn(field="Animal", title="Animal"),
           TableColumn(field="Breed", title="Breed", sortable=True)]

data_table = DataTable(source=source, columns=columns, width=800, view=view1)

callback = CustomJS(args=dict(source=source, view=view1), code="""
var data = source.data;
var f = cb_obj.value;
for(var i = 0; i < data['Animal'].length; i++){
    if(data['Animal'][i] == f || f == 'All'){
        view.filters[0].booleans[i] = true;
    } else {
        view.filters[0].booleans[i] = false;
    }
}
source.change.emit();
""")

select.js_on_change('value',callback)
show(column(select, data_table))```

来自bokeh.models导入CDSView、BooleanFilter
从bokeh.io导入显示，输出
从bokeh.layouts导入列
从bokeh.models.widgets导入选择、数据表、表列
从bokeh.models.sources导入ColumnDataSource，CDSView
从bokeh.models导入CustomJS
输出_笔记本（）
选择=选择（title=“Animal”，options=[“All”，“Cat”，“Dog”]）
source=ColumnDataSource（数据=dict（动物=[“猫”、“猫”、“猫”、“狗”、“狗”、“狗”、“狗”]，
品种=[“暹罗”、“波斯”、“孟加拉”、“缅甸”、“实验室”、“金色”、“贵宾犬”、“哈巴狗]））
布尔值=[source.data['Animal']中的i为True]
view1=CDSView（source=source，filters=[BooleanFilter（booleans）]）
columns=[TableColumn（field=“Animal”，title=“Animal”），
TableColumn（field=“bride”，title=“bride”，sortable=True）]
数据表=数据表（源=源，列=列，宽度=800，视图=视图1）
callback=CustomJS（args=dict（source=source，view=view1），code=“”
var数据=source.data；
var f=cb_对象值；
对于（变量i=0；i

为冗余表示歉意！有了这些，非常感谢，这就解决了问题。

from bokeh.models import CDSView, BooleanFilter
from bokeh.io import show, output_notebook
from bokeh.layouts import column
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS

output_notebook()

select = Select(title="Animal", options=["All","Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog"],
                                  Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

booleans = [True for i in source.data['Animal']]
view1 = CDSView(source=source, filters=[BooleanFilter(booleans)])

columns = [TableColumn(field="Animal", title="Animal"),
           TableColumn(field="Breed", title="Breed", sortable=True)]

data_table = DataTable(source=source, columns=columns, width=800, view=view1)

callback = CustomJS(args=dict(source=source, view=view1), code="""
var data = source.data;
var f = cb_obj.value;
for(var i = 0; i < data['Animal'].length; i++){
    if(data['Animal'][i] == f || f == 'All'){
        view.filters[0].booleans[i] = true;
    } else {
        view.filters[0].booleans[i] = false;
    }
}
source.change.emit();
""")

select.js_on_change('value',callback)
show(column(select, data_table))```