Добавление нового столбца в Datatable через JavaScript -callback - PullRequest
Новая
       31

Добавление нового столбца в Datatable через JavaScript -callback

0 голосов
/ 02 апреля 2020

Я хотел бы знать, есть ли какой-нибудь метод для добавления нового столбца в datatable через JavaScript -callback. Например, у меня есть некоторые данные из 2 столбцов, я нажимаю кнопку, а затем уже обновил данные из 3 столбцов.

Какой-то шаблон (данные для 3-го столбца называются «data_to_add» и там комментируются) : 

from datetime import date
from random import randint

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

# data_to_add = [randint(10, 60) for i in range(10)]

source = ColumnDataSource(data)

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


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

button = Button(label="Button")

button.js_on_event(ButtonClick, CustomJS(code="""
    console.log("I'm going to add new column to your table")
                    """)
                  )

show(column(data_table,button))

Спасибо!

1 Ответ

1 голос
/ 02 апреля 2020

Возможно, но ваши данные должны каким-то образом оказаться в источнике данных. Либо потому, что вы поместили его прямо туда в JavaScript, либо потому, что вы поместили его туда до того, как сгенерировал файл HTML с этим вызовом show(...), либо потому, что вы используете сервер Bokeh, который может добавлять столбцы к источникам данных динамически.

С учетом сказанного, вот кратчайший пример, который я мог бы привести: 

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import DataTable, TableColumn, Button, CustomJS, ColumnDataSource

ds = ColumnDataSource(data=dict(a=[1, 2, 3], b=[2, 3, 4]))
t = DataTable(columns=[TableColumn(title='a', field='a'),
                       TableColumn(title='b', field='b')],
              source=ds)

b = Button(label="Add random column")

b.js_on_click(CustomJS(args=dict(ds=ds, t=t),
                       code="""\
                           let column_name = null;
                           while (column_name == null || column_name in ds.data) {
                               column_name = Math.random().toString(36).substring(7);
                           }
                           const n = ds.get_length();
                           ds.data[column_name] = Array.from({length: n}, () => Math.random());

                           const TableColumn = Bokeh.Models('TableColumn');
                           t.columns.push(new TableColumn({title: column_name,
                                                           field: column_name}));
                           t.change.emit();
                           ds.change.emit();
                       """))

show(column(b, t))
...