关于#javascript#的问题：页面点击列表条目，传参数到bootstrapTable中，展示相关的数据

Question

页面点击列表条目，传参数到bootstrapTable中，展示相关的数据

function createWCN(emp_id){
            $.ajax({
                url : "/ylerp/GetWorkCenterServlet",
                type : 'GET',
                dataType : "JSON",
                data : {
                    emp_id : emp_id
                },
                timeout : 50000,
                success : function(data) {
//            alert(JSON.stringify(data))
                    initWC(data, emp_id);
                }
            })

            $("ul#wc").on("click", "li", function() { // 只需要找到你点击的是哪个ul里面的就行
//        alert($(this).data('wc'));
//                 loadData(emp_id, $(this).data('wc'))
                $('#tb_temp').bootstrapTable('refresh')
            });
        }

        function initWC(data,emp_id){
            $("#wc").html("")
            $.each(data, function(i, n) {
                $("#wc").append(
                    "<li id='wc" + i + "' class='list-group-item' data-wc='"
                    + data[i].device_SN_ID + "'><a>" + data[i].wC_Name
                    + "</a></li>");
            });

            if ($("#wc0").length > 0) {
                loadData(emp_id, $("#wc0").data('wc'));
                console.log( $("#wc0").data('wc'))
            }
            console.log(data)

        }

通过这段代码，点击相应的ul，将相关设备的数据展示在bootstrapTable中，而在点击时刷新bootstrapTable，这个时候如何将参数传入呢？上述代码该怎么改。

Answer 1

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

为了实现在点击列表项时将参数正确传递给bootstrapTable并刷新其内容，我们可以对提供的代码进行一些调整。关键在于确保在bootstrapTable刷新时能获取到正确的参数值。下面是一个修改后的示例代码段，展示了如何实现这一功能：

$(document).ready(function(){
    function createWCN(emp_id){
        $.ajax({
            url : "/ylerp/GetWorkCenterServlet",
            type : 'GET',
            dataType : "JSON",
            data : {
                emp_id : emp_id
            },
            timeout : 50000,
            success : function(data) {
                initWC(data, emp_id);
            }
        })
    }

    function initWC(data,emp_id){
        $("#wc").html("");
        $.each(data, function(i, n) {
            $("#wc").append(
                "<li id='wc" + i + "' class='list-group-item' data-wc='"
                + data[i].device_SN_ID + "'><a>" + data[i].wC_Name
                + "</a></li>");
        });

        if ($("#wc0").length > 0) {
            loadData(emp_id, $("#wc0").data('wc'));
        }
    }

    function loadData(emp_id, wc_id) {
        // 这里应该是获取数据并填充bootstrapTable的逻辑
        // 假设我们有一个函数fetchDataFromServer用于从服务器获取数据
        fetchDataFromServer(emp_id, wc_id, function(response) {
            // 使用response数据填充bootstrapTable
            $('#tb_temp').bootstrapTable('load', response);
        });
    }

    function fetchDataFromServer(emp_id, wc_id, callback) {
        // 模拟数据获取过程
        $.ajax({
            url: "/ylerp/GetWorkCenterDataServlet",
            type: 'GET',
            dataType: "JSON",
            data: {
                emp_id: emp_id,
                wc_id: wc_id
            },
            success: function(data) {
                callback(data); // 将数据传递给callback处理
            }
        });
    }

    // 绑定事件处理器到ul列表项
    $("ul#wc").on("click", "li", function() {
        var wc_id = $(this).data('wc');
        loadData(emp_id, wc_id); // 调用loadData函数并传递参数
        $('#tb_temp').bootstrapTable('refresh'); // 刷新bootstrapTable
    });

    // 初始化
    createWCN(emp_id);
});

在这段代码中，主要做了以下几点修改：

1. 添加了fetchDataFromServer函数：这个函数用于从服务器获取数据，它接收emp_id和wc_id作为参数，并在数据获取成功后调用回调函数callback。

2. 修改了loadData函数：现在这个函数接收emp_id和wc_id作为参数，并使用这两个参数调用fetchDataFromServer函数。当数据获取完成后，使用response数据加载bootstrapTable。

3. 更新了点击事件处理器：现在当列表项被点击时，会从当前点击的元素获取wc_id，然后调用loadData函数并传递emp_id和wc_id。之后立即刷新bootstrapTable。

通过这样的设计，可以确保每次点击列表项时，都能正确地将对应的wc_id参数传递给bootstrapTable，并刷新显示最新的数据。