Bokeh 通过 Bokeh DataTable 选择来触发事件

在本文中，我们将介绍如何使用 Bokeh 中的 DataTable 组件来触发事件，并提供一些示例来说明。

阅读更多：Bokeh 教程

Bokeh DataTable 概述

Bokeh 是一个交互式的数据可视化库，用于创建漂亮、交互式的图表和应用程序。其中的 DataTable 组件是一个用于展示数据的表格组件，在表格中可以进行选择操作。

在 Bokeh 中，我们可以通过使用 ColumnDataSource 来生成 DataTable 所需的数据源。我们可以通过添加 Column 数据列来定制 DataTable 的列。例如，假设我们有以下数据：

from bokeh.models import ColumnDataSource, DataTable, StringColumn, NumberColumn

source = ColumnDataSource(data={
    '姓名': ['小明', '小红', '小亮'],
    '年龄': [12, 16, 15],
    '得分': [85, 92, 78]
})

columns = [
    StringColumn(field='姓名', title='姓名'),
    NumberColumn(field='年龄', title='年龄'),
    NumberColumn(field='得分', title='得分')
]

data_table = DataTable(source=source, columns=columns, editable=True)

上述代码中，我们创建了一个包含姓名、年龄和得分的数据源，并添加了相应的数据列。生成的 DataTable 是可编辑的，可以进行选择操作。

Bokeh DataTable 选择事件

Bokeh 提供了一个 on_change 方法，用于注册事件回调函数，以便在 DataTable 的选择状态发生变化时触发相应的事件。可以通过 callback 参数来指定回调函数，并通过 bokeh.events.SelectionGeometry 事件类型来检测选择事件。

以下是一个示例，展示了如何触发选择事件：

from bokeh.events import SelectionGeometry
from bokeh.models import CheckboxGroup

def selection_callback(event):
    if isinstance(event, SelectionGeometry):
        selected_indices = event.indices
        print("选择的行索引:", selected_indices)

data_table.on_change('selected', selection_callback)

上述代码中，我们定义了一个回调函数 selection_callback，在函数体内我们判断事件是否为 SelectionGeometry，如果是，则获取选择的行索引并打印出来。接下来，我们通过使用 on_change 方法将回调函数注册到 DataTable 的 selected 属性上。

示例说明

以下是一个完整的示例，展示了如何使用 Bokeh DataTable 的选择事件来实现数据的更新。

from bokeh.models import ColumnDataSource, DataTable, StringColumn, NumberColumn
from bokeh.layouts import column
from bokeh.io import curdoc
from bokeh.events import SelectionGeometry

# 创建数据源
source = ColumnDataSource(data={
    '姓名': ['小明', '小红', '小亮'],
    '年龄': [12, 16, 15],
    '得分': [85, 92, 78]
})

# 创建数据表格
columns = [
    StringColumn(field='姓名', title='姓名'),
    NumberColumn(field='年龄', title='年龄'),
    NumberColumn(field='得分', title='得分')
]
data_table = DataTable(source=source, columns=columns, editable=True, width=400)

# 创建选择回调函数
def selection_callback(event):
    if isinstance(event, SelectionGeometry):
        selected_indices = event.indices
        new_source_data = {
            '姓名': [source.data['姓名'][i] for i in selected_indices],
            '年龄': [source.data['年龄'][i] for i in selected_indices],
            '得分': [source.data['得分'][i] for i in selected_indices]
        }
        source.data = new_source_data

# 注册选择回调函数
data_table.on_change('selected', selection_callback)

# 创建复选框组件
checkbox_group = CheckboxGroup(labels=["选择"], active=[])
checkbox_group.js_on_click(
    code="""
    const selected_indices = data_table.selected.indices;
    checkbox_group.active = selected_indices;
    """
)

# 构建布局
layout = column(data_table, checkbox_group)

# 显示应用程序
curdoc().add_root(layout)

在上述示例中，我们创建了一个包含姓名、年龄和成绩的数据源，并使用 DataTable 创建了一个表格。我们还定义了一个回调函数 selection_callback，用于在选择变化时更新数据源。在布局中，我们还添加了一个复选框组件 checkbox_group，它会根据选择行的变化而自动更新。