本教程详细讲解如何利用Bokeh的`CustomJS`回调函数，结合`MultiChoice`小部件，实现`DataTable`列的动态显示与隐藏。文章重点指出JavaScript布尔类型大小写敏感的常见陷阱，并提供修正后的代码示例，帮助开发者构建交互式数据表格，提升用户体验。

Bokeh DataTable列动态可见性控制

在交互式数据可视化应用中，根据用户选择动态调整数据表格（DataTable）的显示内容是一项常见需求。Bokeh提供强大的`CustomJS`回调机制，允许开发者在浏览器端直接执行JavaScript代码，从而实现高性能的客户端交互。本文将详细介绍如何结合`MultiChoice`小部件和`CustomJS`，实现`DataTable`列的动态可见性控制。

问题场景与初步尝试

假设我们有一个`DataTable`，其中包含多列数据。我们希望通过一个`MultiChoice`小部件，让用户选择需要显示的列，未被选择的列则保持隐藏状态。一个常见的实现思路是，当`MultiChoice`的值发生变化时，通过`CustomJS`遍历`DataTable`的列，并根据选择结果更新其`visible`属性。

以下是一个初始的代码片段，展示了这种思路：

import pandas as pd
from bokeh.plotting import show
from bokeh.models import ColumnDataSource, CustomJS, MultiChoice
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import column
示例数据，包含多列
data = {
'Li': [1, 2, 3],
'Be': [4, 5, 6],
'B': [7, 8, 9],
'C': [10, 11, 12],
'N': [13, 14, 15]
}
df = pd.DataFrame(data)
准备数据源，包含所有列
filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)
初始化DataTable列
假设初始时，'Li'和'Be'是可见的，其他列是隐藏的
initial_visible_columns = ['Li', 'Be']
filtered_table_cols = []
for col_name in df.columns:
is_visible_initially = col_name in initial_visible_columns
filtered_table_cols.append(TableColumn(field=col_name, title=col_name, width=100, visible=is_visible_initially))
创建DataTable
filtered_table = DataTable(source=filtered_table_source, columns=filtered_table_cols, width=600, height=200)
创建MultiChoice小部件
选项包含所有列名
multi_choice_options = df.columns.tolist()
初始选中值与DataTable的初始可见列匹配
multi_choice = MultiChoice(value=initial_visible_columns, options=multi_choice_options, title='Select elements:')
初始CustomJS回调（存在问题）
callback_initial = CustomJS(args=dict(multi_choice=multi_choice, filtered_table=filtered_table), code="""
// 首先将所有列设为不可见
for (var i=0; i
// 然后根据multi_choice的当前选择，将对应列设为可见
for (var i=0; i
""")

							

								
								

									Interior AI
									
AI室内设计，上传室内照片自动帮你生成多种风格的室内设计图
								
								下载 
							
						
multi_choice.js_on_change("value", callback_initial)
show(column(multi_choice, filtered_table)) # 运行此段代码会发现DataTable列无变化

核心问题：JavaScript布尔类型的大小写敏感性
当尝试运行上述代码时，用户可能会发现`DataTable`的列并没有按照预期进行显示或隐藏。问题症结在于`CustomJS`回调函数中的布尔值赋值。在Python中，布尔类型使用`True`和`False`（首字母大写），但在JavaScript中，布尔字面量是`true`和`false`（全小写）。`CustomJS`在浏览器端执行的是纯JavaScript代码，因此必须遵循JavaScript的语法规范。
错误的写法：
filtered_table.columns[i].visible = True; // 这是Python的布尔值
正确的写法：
filtered_table.columns[i].visible = true; // 这是JavaScript的布尔值
修正后的CustomJS回调实现
理解了布尔类型的大小写差异后，我们可以轻松修正`CustomJS`回调函数。修正后的代码将确保`DataTable`的列可见性能够正确响应`MultiChoice`小部件的更改。
import pandas as pd
from bokeh.plotting import show
from bokeh.models import ColumnDataSource, CustomJS, MultiChoice
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import column
示例数据，包含多列
data = {
'Li': [1, 2, 3],
'Be': [4, 5, 6],
'B': [7, 8, 9],
'C': [10, 11, 12],
'N': [13, 14, 15]
}
df = pd.DataFrame(data)
准备数据源，包含所有列
filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)
初始化DataTable列
假设初始时，'Li'和'Be'是可见的，其他列是隐藏的
initial_visible_columns = ['Li', 'Be']
filtered_table_cols = []
for col_name in df.columns:
is_visible_initially = col_name in initial_visible_columns
filtered_table_cols.append(TableColumn(field=col_name, title=col_name, width=100, visible=is_visible_initially))
创建DataTable
filtered_table = DataTable(source=filtered_table_source, columns=filteredtable