如何向 Bokeh DataTable 添加回调？

Question

我正在尝试使用 Bokeh 制作可编辑的 DataTable，在编辑数据时更新源数据。我从标准的 DataTable 示例 here 开始，并将可编辑的 kwarg 设置为 true。这是我所在的位置：

from datetime import date
from random import randint

from bokeh.models import ColumnDataSource, Callback
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.io import output_file, output_notebook, show, vform
output_notebook()
data = dict(dates=[date(2014, 3, i+1) for i in range(10)],
            downloads=[randint(0, 100) for i in range(10)])

source = ColumnDataSource(data)

columns = [TableColumn(field="dates", title="Date", formatter=DateFormatter()),
           TableColumn(field="downloads", title="Downloads")]

callback = Callback(args=dict(Source=source), code="""
       console.log( '#cell edited')""")

data_table = DataTable(source=source, columns=columns, width=400, height=280, editable=True)
data_table.on_change(callback,source)
show(vform(data_table))

这会生成一个可编辑的数据表，但我不知道如何获取回调以更新源数据，或配置源数据以使其自动执行此操作。我认为有一种方法可以使用 ColumnDataSource 自动执行此操作，然后尝试编写回调。然而，DataTable 似乎没有回调选项，但奇怪的是它有一个 on_change 属性。

有人知道怎么做吗？

Answer 1

2019/07/18 更新。 Bokeh v1.0.0 及更新版本

使用editable=True 更新源数据，并在更新data 属性时调用on_change 回调。但是我们需要一个辅助变量来保留旧的数据源。

from bokeh.models import ColumnDataSource
from bokeh.models.widgets.tables import (
    DataTable, TableColumn, IntEditor
)
from bokeh.io import curdoc
import copy

dict1 = {
    'x': [0, 0, 0, 0, 0, 0],
    'y': [0, 1, 0, 1, 0, 1]
}
source = ColumnDataSource(data=dict1)

old_source = ColumnDataSource(copy.deepcopy(dict1))

columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y", title="y", editor=IntEditor(step=1))
]

data_table = DataTable(
    source=source,
    columns=columns,
    width=800,
    editable=True,
    reorderable=False,
)

def on_change_data_source(attr, old, new):
    # old, new and source.data are the same dictionaries
    print('-- SOURCE DATA: {}'.format(source.data))
    print('>> OLD SOURCE: {}'.format(old_source.data))

    # to check changes in the 'y' column:
    indices = list(range(len(old['y'])))
    changes = [(i,j,k) for i,j,k in zip(indices, old_source.data['y'], source.data['y']) if j != k]
    print('>> CHANGES: {}'.format(changes))

    old_source.data = copy.deepcopy(source.data)

print('SOURCE DATA: {}'.format(source.data))

data_table.source.on_change('data', on_change_data_source)

curdoc().add_root(data_table)

Bokeh v0.13.0 及更低版本

这适用于 Bokeh v0.13.0 及更低版本。 ：

from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.io import curdoc

dict1 = {
    'x':[0]*6,
    'y':[0,1,0,1,0,1]
}
source = ColumnDataSource(data=dict1)

columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y", title="y")
]

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

def on_change_data_source(attr, old, new):
    print('-- OLD DATA: {}'.format(old))
    print('-- NEW DATA: {}'.format(new))
    print('-- SOURCE DATA: {}'.format(source.data))

    # to check changes in the 'y' column:
    indices = list(range(len(old['y'])))
    changes = [(i,j,k) for i,j,k in zip(indices, old['y'], new['y']) if j != k]
    if changes != []:
        for t in changes:  # t = (index, old_val, new_val)
            patch = {
                'y' : [(t[0], int(t[2])), ]   # the new value is received as a string
            }
            # source2.patch(patch)  # to update the values on another source variable for instance

source.on_change('data', on_change_data_source)

curdoc().add_root(data_table)

Answer 2

以下代码将检测单击（选择）一行或多行的事件。我放了一些 console.log 来输出选择的行。

from datetime import date
from random import randint
import bokeh
import bokeh.plotting 

data = dict(dates=[date(2014, 3, i+1) for i in range(10)],
            downloads=[randint(0, 100) for i in range(10)])

source = bokeh.models.ColumnDataSource(data)

columns = [bokeh.models.TableColumn(field="dates", title="Date",
           formatter=bokeh.models.DateFormatter()),
           bokeh.models.TableColumn(field="downloads", title="Downloads")]

source.callback = bokeh.models.CustomJS(args=dict(source=source), code="""
       console.log( '#Selected rows:');
       var indices = source.selected["1d"].indices;
       for (var i = 0; i<indices.length; i++){
           console.log(i+":"+indices[i]);
       }
       """)

data_table = bokeh.models.DataTable(source=source, columns=columns, 
                                    width=400, height=280, editable=True)

bokeh.io.output_notebook()
bokeh.io.show(data_table)