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

以下代码将检测单击（选择）一行或多行的事件。我放了一些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)

Answer 2

这适用于Bokeh版本0.12.14。使用editable=True更新源数据，并在on_change属性更新时调用data回调：

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
            }
            source.patch(patch)   # this will call to this callback again, ugly
                                  # so you will need to update the values on another source variable
        print('-- SOURCE DATA AFTER PATCH: {}'.format(source.data))

source.on_change('data', on_change_data_source)

curdoc().add_root(data_table)

如何将回调添加到Bokeh DataTable？

2 个答案: