如何实现MS SQL Server与Tabulator的数据交互？

一、将MS SQL Server数据加载至Tabulator表格 #

完全可以实现，核心逻辑是通过后端接口从MS SQL查询数据并返回JSON格式，再由Tabulator通过AJAX获取并渲染。

实现步骤：

1. 后端编写数据查询接口（以C# ASP.NET为例）
   连接MS SQL执行查询，将结果序列化为JSON返回：

   [HttpGet("api/ms-sql-data")]
   public IActionResult GetSqlData()
   {
       var connStr = "你的MS SQL连接字符串";
       var data = new List<Dictionary<string, object>>();
       
       using (var conn = new SqlConnection(connStr))
       {
           conn.Open();
           var cmd = new SqlCommand("SELECT Id, Username, Email, CreateTime FROM Users", conn);
           
           using (var reader = cmd.ExecuteReader())
           {
               while (reader.Read())
               {
                   var row = new Dictionary<string, object>();
                   for (int i = 0; i < reader.FieldCount; i++)
                   {
                       row[reader.GetName(i)] = reader[i];
                   }
                   data.Add(row);
               }
           }
       }
       return Ok(data);
   }
   

2. 前端Tabulator配置加载
   指定AJAX接口地址，配置列对应数据库字段：

   const table = new Tabulator("#user-table", {
       ajaxURL: "/api/ms-sql-data",
       columns: [
           { title: "ID", field: "Id", width: 80 },
           { title: "用户名", field: "Username", editor: "input" },
           { title: "邮箱", field: "Email", editor: "input" },
           { title: "创建时间", field: "CreateTime", sorter: "date" }
       ]
   });
   

二、Tabulator修改数据后保存回MS SQL Server #

同样可以实现，通过监听Tabulator的编辑事件，将变更数据发送到后端接口，由后端执行SQL更新操作。

实现步骤：

1. 前端监听编辑事件并发送数据
   当单元格编辑完成后，将整行数据提交到后端：

   table.on("cellEdited", function(cell) {
       const rowData = cell.getRow().getData();
       
       fetch("/api/update-sql-data", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(rowData)
       })
       .then(res => res.json())
       .then(result => {
           if (!result.success) {
               cell.getRow().revert(); // 更新失败则回滚单元格内容
               alert("数据更新失败：" + result.msg);
           }
       })
       .catch(err => {
           cell.getRow().revert();
           console.error("请求异常：", err);
       });
   });
   

2. 后端编写数据更新接口
   接收前端数据，执行参数化UPDATE语句（避免SQL注入）：

   [HttpPost("api/update-sql-data")]
   public IActionResult UpdateSqlData([FromBody] Dictionary<string, object> rowData)
   {
       var connStr = "你的MS SQL连接字符串";
       using (var conn = new SqlConnection(connStr))
       {
           conn.Open();
           var cmd = new SqlCommand(
               "UPDATE Users SET Username = @Username, Email = @Email WHERE Id = @Id", 
               conn
           );
           
           cmd.Parameters.AddWithValue("@Id", rowData["Id"]);
           cmd.Parameters.AddWithValue("@Username", rowData["Username"]);
           cmd.Parameters.AddWithValue("@Email", rowData["Email"]);
           
           var affectedRows = cmd.ExecuteNonQuery();
           if (affectedRows > 0)
           {
               return Ok(new { success = true });
           }
           else
           {
               return Ok(new { success = false, msg = "未找到对应记录" });
           }
       }
   }
   

注意事项 #

• 必须使用参数化查询防止SQL注入，上述示例已遵循该规范。
• 可根据需求调整为批量更新（监听Tabulator的batchEdited事件）。
• 若使用Node.js、PHP等其他后端语言，逻辑一致：用对应数据库驱动连接MS SQL，完成查询/更新操作后返回JSON。

内容的提问来源于stack exchange，提问作者Andrew Grudin