时间戳

首页 > 解决方案 > 散景数据表重新排序列

python-3.x - 散景数据表重新排序列

问题描述

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

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

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

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.xdatatablebokeh

解决方案

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

[散景] - “启用 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 示例中看到为 Bokeh 应用程序使用模板的示例。

推荐阅读