刷新bootstrapTable并将点击的li标签中存储的数据的其中两项作为参数参入bootstrapTable中，展示相应的图表

Question

通过点击ul标签下的li标签后，刷新bootstrapTable并将点击的li标签中存储的数据的其中两项作为参数参入bootstrapTable中，展示相应的图表，该怎么做

Answer 1

引自免费微信小程序：皆我百晓生

要实现这个需求，我们可以通过监听li标签的点击事件，获取存储在li标签中的数据，并将这些数据作为参数传递给bootstrapTable，从而动态更新表格内容并展示相应的图表。以下是一个详细的步骤说明及示例代码：

步骤 1: 准备HTML结构

首先，确保你的HTML页面包含ul列表和bootstrapTable。

<ul id="dataList">
    <li data-id="1" data-name="John">John Doe</li>
    <li data-id="2" data-name="Jane">Jane Doe</li>
    <!-- 更多列表项 -->
</ul>

<table id="dynamicTable" class="table table-striped table-bordered"></table>
<div id="chartContainer"></div>

步骤 2: 初始化Bootstrap Table和图表

在JavaScript中初始化bootstrapTable和任何需要的图表库（例如：ECharts、Chart.js等）。

$(document).ready(function () {
    // 初始化bootstrapTable
    $('#dynamicTable').bootstrapTable({
        data: [], // 初始数据可以为空
        columns: [
            { field: 'name', title: 'Name' },
            { field: 'id', title: 'ID' }
        ]
    });

    // 初始化图表（以ECharts为例）
    var chart = echarts.init(document.getElementById('chartContainer'));
});

步骤 3: 监听li标签的点击事件

为li标签添加点击事件监听器，当点击时，从li标签中提取数据并更新bootstrapTable和图表。

$('#dataList li').on('click', function () {
    var id = $(this).data('id');
    var name = $(this).data('name');

    // 更新bootstrapTable
    var data = [{ id: id, name: name }]; // 假设只展示当前点击项
    $('#dynamicTable').bootstrapTable('load', data);

    // 更新图表
    updateChart(id, name);
});

function updateChart(id, name) {
    // 这里根据id和name获取图表数据并更新图表
    // 示例代码：
    var chartData = {
        series: [
            {
                name: name,
                type: 'bar',
                data: [20, 30, 40] // 示例数据
            }
        ]
    };
    chart.setOption({
        series: chartData.series
    });
}

注意事项

• 确保bootstrapTable和图表库（如ECharts）已经正确加载到你的项目中。
• 上述代码仅作为示例，实际应用中可能需要根据具体需求调整数据格式和图表配置。
• updateChart函数中的图表数据应根据实际业务逻辑获取。

这样，每当用户点击li标签时，bootstrapTable将被刷新以显示与点击项相关的信息，同时图表也将根据所选项进行更新。