散景数据表重新排序列答案

【问题标题】：Bokeh datatable reorder columns散景数据表重新排序列
【发布时间】：2019-10-10 06:33:35
【问题描述】：

当我阅读有关数据表的 Bokeh 文档时，可重新排序选项似乎表明可以进行拖放重新排序。

”允许重新排序表的列。要对列重新排序，请单击表格标题并将其拖动到表格中的所需位置。两侧的列将保持其先前的顺序。”

我无法让它工作。代码如下。有谁知道这是如何工作的？

import numpy as np
import pandas as pd

from bokeh.io import curdoc
from bokeh.layouts import column, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn

df = pd.DataFrame(columns=['x1', 'x2'])
n=10
np.random.seed(0)
df['x1'] = np.random.rand(n)
df['x2'] = np.random.rand(n)

source = ColumnDataSource(df)
columns=[TableColumn(field=Ci, title=Ci) for Ci in df.columns]
data_table = DataTable(source=source, columns=columns, name="table", sizing_mode="scale_both", reorderable=True, sortable=True, fit_columns=True)
l1 = widgetbox([data_table])

curdoc().add_root(l1)

【问题讨论】：

标签： python-3.x datatable bokeh

【解决方案1】：

我不确定它的文档记录如何，但是如果您查看浏览器 JS 控制台，您会看到原因：

[bokeh] – “启用 DataTable.reorderable 需要 jquery-ui” document.js:1

我们不会自动包含 jq-ui，因为没有办法证明仅针对这一微小功能的软件包膨胀量是合理的。（显然几乎没有人尝试过使用，这是大约 6 年来关于它的第一个问题）。

因此，您需要为您的 Bokeh 应用制作一个模板，并在模板中自己显式加载 jquery 和 jquery-ui。比如：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

您可以在gapminder example 中查看为 Bokeh 应用程序使用模板的示例。

【讨论】：