如何把复选框选中的数据作为字符串参数传递给 SQL 存储过程

作者：袖梨 2026-06-16

本文详解如何从 jTable 中批量勾选的行提取指定列（如 ref_no）的字符串值，并安全地序列化为逗号分隔字符串，最终作为参数传入后端 WebMethod 及 SQL 存储过程，涵盖前端采集、JSON 传输、服务端反序列化与 SQL 参数化调用全流程。

本文详解如何从 jtable 中批量勾选的行提取指定列（如 `ref_no`）的字符串值，并安全地序列化为逗号分隔字符串，最终作为参数传入后端 webmethod 及 sql 存储过程，涵盖前端采集、json 传输、服务端反序列化与 sql 参数化调用全流程。

在基于 jTable 的账户管理模块中，常需对多行记录执行批量操作（如“Reassign”），其核心前提是准确获取用户勾选行的关键字段（如 ref_no）并以字符串形式提交至后端，进而作为参数调用 SQL 存储过程。以下为完整、健壮、可直接落地的实现方案：

✅ 前端：精准采集 ref_no 字符串数组

jTable 渲染后，每行 <tr> 包含多个 <td>，其中 ref_no 对应第 2 列（索引为 1，因 Tag 列为第 0 列）。需避免使用 nth-child(2)（易受隐藏列或动态结构影响），而应通过字段名语义定位：

$("#btnReassign").on("click", function () {    const checkedBoxes = $('input.chk:checked'); // 使用类选择器更可靠    const refNos = [];    checkedBoxes.each(function () {        const $row = $(this).closest('tr');        // 安全获取 ref_no：查找 class="jtable-column-ref_no" 的 td 或按列序（推荐前者）        const $refNoCell = $row.find('td.jtable-column-ref_no');        if ($refNoCell.length) {            const refNo = $.trim($refNoCell.text());            if (refNo) refNos.push(refNo);        }    });    if (refNos.length === 0) {        alert("请至少选择一行进行重新分配");        return;    }    // 发送至后端 WebMethod    $.ajax({        type: "POST",        url: "List.aspx/ReassignAccounts",        data: JSON.stringify({ refNos: refNos }),        contentType: "application/json; charset=utf-8",        dataType: "json",        success: function (response) {            if (response.d && response.d.Result === "OK") {                alert("已成功提交重分配请求");                $('#TableContainer').jtable('reload'); // 刷新表格            } else {                alert("操作失败：" + (response.d?.Message || "未知错误"));            }        },        error: function (xhr, status, err) {            alert("网络错误：" + err);        }    });});

关键说明：

jTable 会自动为每列 <td> 添加 class="jtable-column-{fieldName}"（如 jtable-column-ref_no），这是最稳定的选择器；

使用 .text() 提取纯文本值，避免 HTML 标签干扰；

严格校验空值，防止空字符串进入数据库。

✅ 后端：WebMethod 接收并调用存储过程

新增一个 [WebMethod] 接收字符串数组，并通过参数化方式调用 SQL 存储过程（严禁字符串拼接）：

[WebMethod(EnableSession = true)]public static object ReassignAccounts(string[] refNos){    try    {        if (refNos == null || refNos.Length == 0)            return new { Result = "ERROR", Message = "未提供有效 ref_no 列表" };        // 将字符串数组安全转为逗号分隔字符串（仅用于日志或调试，不用于 SQL 拼接）        string refNosCsv = string.Join(",", refNos.Select(r => $"'{r.Replace("'", "''")}'"));        // ✅ 正确做法：使用表值参数（TVP）或逐条处理        // 示例：调用支持 TVP 的存储过程（推荐）        var result = _repository.NewAccount.ReassignByRefNos(refNos);        return new { Result = "OK", Message = $"成功处理 {result} 条记录" };    }    catch (Exception ex)    {        return new { Result = "ERROR", Message = ex.Message };    }}

? 存储过程调用建议（C# Repository 层）

// 使用 DataTable 构造表值参数（TVP）public int ReassignByRefNos(string[] refNos){    using (var conn = new SqlConnection(connectionString))    {        conn.Open();        using (var cmd = new SqlCommand("sp_ReassignAccounts", conn))        {            cmd.CommandType = CommandType.StoredProcedure;            // 构建 TVP            var tvp = new DataTable();            tvp.Columns.Add("RefNo", typeof(string));            foreach (var refNo in refNos)                tvp.Rows.Add(refNo);            var param = cmd.Parameters.AddWithValue("@RefNoList", tvp);            param.SqlDbType = SqlDbType.Structured;            param.TypeName = "dbo.StringList"; // 需提前在 SQL 中创建 TYPE            return (int)cmd.ExecuteScalar();        }    }}

⚠️ 重要安全提醒：

绝对禁止将 refNos 直接拼入 SQL 字符串（如 "IN ('" + string.Join("','", refNos) + "')"），极易导致 SQL 注入；

表值参数（TVP）是批量传参的黄金标准，兼顾性能与安全性；

若无法使用 TVP，可改用 UNION ALL 动态构建参数化查询，但 TVP 更优。

✅ SQL 存储过程示例（使用 TVP）

-- 1. 创建自定义表类型（只需执行一次）CREATE TYPE dbo.StringList AS TABLE (Value NVARCHAR(50) NOT NULL);-- 2. 存储过程CREATE PROCEDURE sp_ReassignAccounts    @RefNoList dbo.StringList READONLYASBEGIN    SET NOCOUNT ON;    UPDATE a     SET RMID = @NewRMID, UpdatedAt = GETDATE()    FROM Accounts a    INNER JOIN @RefNoList t ON a.RefNo = t.Value;    SELECT @@ROWCOUNT;END

✅ 总结与最佳实践

环节	推荐做法	禁止行为
前端采集	使用 jtable-column-{field} 类选择器 + .text() 提取；过滤空值	依赖 nth-child() 或 innerHTML
数据传输	JSON.stringify({ refNos: [...] }) + contentType: "application/json"	URL 查询字符串传大量数据
后端接收	[WebMethod] 接收 string[]；验证非空	接收 string 再手动 Split(',')（易被注入）
SQL 调用	表值参数（TVP）或参数化 IN 子句（如 WHERE RefNo IN (@p1,@p2,...)）	字符串拼接 SQL