本教程详细讲解如何利用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
<h1>示例数据，包含多列</h1><p>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)</p><h1>准备数据源，包含所有列</h1><p>filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)</p><h1>初始化DataTable列</h1><h1>假设初始时，'Li'和'Be'是可见的，其他列是隐藏的</h1><p>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))</p><h1>创建DataTable</h1><p>filtered_table = DataTable(source=filtered_table_source, columns=filtered_table_cols, width=600, height=200)</p><h1>创建MultiChoice小部件</h1><h1>选项包含所有列名</h1><p>multi_choice_options = df.columns.tolist()</p><h1>初始选中值与DataTable的初始可见列匹配</h1><p>multi_choice = MultiChoice(value=initial_visible_columns, options=multi_choice_options, title='Select elements:')</p><h1>初始CustomJS回调（存在问题）</h1><p>callback_initial = CustomJS(args=dict(multi_choice=multi_choice, filtered_table=filtered_table), code="""
// 首先将所有列设为不可见
for (var i=0; i<filtered_table.columns.length; i++) {
filtered_table.columns[i].visible = False; // 错误：应为false
}</p><pre class="brush:php;toolbar:false;">// 然后根据multi_choice的当前选择，将对应列设为可见
for (var i=0; i<filtered_table.columns.length; i++) {
for (var j=0; j<multi_choice.value.length; j++) {
if (filtered_table.columns[i].field == multi_choice.value[j]) {
filtered_table.columns[i].visible = True; // 错误：应为true
break; // 找到匹配项后，无需继续检查该列的其他选项
}
}
}
filtered_table.change.emit(); // 触发DataTable的更新""")
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
<h1>示例数据，包含多列</h1><p>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)</p><h1>准备数据源，包含所有列</h1><p>filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)</p><h1>初始化DataTable列</h1><h1>假设初始时，'Li'和'Be'是可见的，其他列是隐藏的</h1><p>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))</p><h1>创建DataTable</h1><p>filtered_table = DataTable(source=filtered_table_source, columns=filtered<em>table</em></p> 
