前端给方法动态传递遍历出来的参数

「爱情、让人受尽委屈。」 2022-04-15 05:39 286阅读 0赞

> 一，问题

在项目时，发现在一个框上有两个功能，即使使用派发事件那种方式去动态获取id，要实现功能也是很麻烦，所以就去参考了前辈的编写方式，学习别人如何在调用方法的时候，动态传参。

> 二，案例功能

2.1 流程

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70]

点击编辑或者删除功能，就能够在调用对应方法的时候，同时也将对应的id值传递过去。

2.2 功能代码

①表格

②获取数据的JQ代码

$.ajax({
                url: '${pageContext.request.contextPath}/wordConfigListController/findAllUserMessage.jhtml',
                data: {},
                async: false,
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $("#tableId").html("");
                        var resultData = data.resultData;
                        for (var i = 0; i < resultData.length; i++) {
                            var data = resultData[i];
                            $("#tableId").append("<tr>" +
                                "<td>" + data.userId + "</td>" +
                                "<td>" + data.userName + "</td>" +
                                "<td>" + data.userDesc + "</td>" +
                                "<td><span class='funcSpan' " +
                                "onclick=\"edit('" + data.userId + "')\">编辑</span>" +
                                "<span class='funcSpan' " +
                                "onclick=\"del('" + data.userId + "')\">刪除</span>" +
                                "</td></tr>");
                        }
                    } else {
                        alert(data.resultXml)
                    }
                    $("#userName").val("");
                    $("#userDesc").val("");
                },
                error: function (data) {
                    alert("操作错误！")
                }
    
            })

> 三，解决方案

3.1 由于数据是遍历出来的，所以问题就在于在遍历数据的时候，我们能够给调用的方法传递参数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70 1]

3.2 方案理解

我们平时编写方式是这样子的`onclick="edit('abcdfg')"`，但由于我们现在是由js的方式去插入数据。所以需要对一些信息进行转义。`onclick=\"func_name(' " + data +" ')\"`

所谓转义，就是不需要符号的表面意义，而是要它的特殊意义。如n，我不需要它给我显示n字符，我想要一个回车功能，所以我就加个\\，变成\\n，这样子它就能变成回车。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70]: /images/20220415/02a7164c721c485fa24e32a5f7ef29b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70 1]: /images/20220415/4bcee9edf246476d81d8edb620bc431c.png