【发布时间】：2019-04-30 10:07:31
【问题描述】：
我正在使用 jQuery 数据表、ajax 和 Web 服务来显示来自 SQL 数据库的数据。我成功地做到了这一点，但是现在我需要一种能够从数据表中仅更新数据库中记录的一列的方法。
我想要什么：如果我点击编辑按钮，这将是一个模态弹出窗口，然后我在弹出窗口中输入一个值，该值应该添加到数据库中已经存在的值中。这是因为在进行新条目时，条目应按每日间隔累积。我的问题是我已经设法在 Web 服务中编写了 Web 方法，它看起来不错，但是我无法更新我想要的字段，请你帮忙，因为我对 jQuery dataTables 和 ajax 了解不多（如何获取我想要更新的记录的 id 并最终能够在客户端使用 jQuery ajax 进行更新）
这是我尝试过的：
客户端 jQuery 和 ajax：
$(document).ready(function () {
insertkpi();
submitinit();
displayKPI();
updateprogress(Id);
});
在数据表中显示
function displayKPI() {
$.ajax({
url: 'MyService.asmx/getKPI',
method: 'post',
dataType: 'json',
success: function (data) {
$('#datatable').DataTable({
data: data,
columns: [
{ 'data': 'Name' },
{
'data': '', 'render': function () {
return "<a class='btn btn-default btn-sm' data-target='#iniativemodal' data-toggle='modal'><i class='glyphicon glyphicon-pencil'>Initiative</i></a>";
}
},
{ 'data': 'Initiative' },
{
'data': 'perfomance',
'render': function (perfomance) {
return perfomance + "%";
}
},
{
'data': 'progress'
//'render': function (progress) {
// return "<a class='btn btn-default btn-sm' data-target='#progressmodal' data-toggle='modal'><i class='fa fa-pencil'>Progress</i></a>";
// }
},
{ 'data': 'BaseTarget' },
{
'data': 'streachTarget'
},
{ 'data': 'Period' },
{
'data': 'Id' ,
'render': function (Id, type, full, meta) {
return '<a href="#" onclick="updateprogress(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';
}
},
]
});
}
}
);
}
从DataTable获取ID更新数据库值的函数：
function updateprogress(Id) {
// var url = "MyService.asmx/getProgress?Id=" + Id+"";
// var url = "MyService.asmx/updateprogres";
$("#progrdata").load("MyService.asmx/updateprogres?Id=" + Id + "", function () {
$("#progressmodal").modal("show");
$("#progrebtn").click(function () {
var progress = $('#pgtxt').val();
var cid = Id.val();
$.ajax({
type: "POST",
url: 'MyService.asmx/updateprogres',
contentType: "application/json;charset=utf-8",
datatype: "json",
data: '{Id: ' +Id + ', progress: "' + progress + '" }',
success: function () {
$('#progressmodal').modal('hide');
},
});
});
})
}
HTML 标记：
<div class="modal" id="progressmodal" data-keyboad="false" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Input Progress</h4>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="progrdata">
<div class="form-group">
<label id ="pnamelb">Cumulative Progress</label>
<label id="prglbl" />
</div>
<div class="form-group">
<label id ="pinelb">Enter progress</label>
<label id="finalpglbl"></label>
<input type="text" class="form-control" id="pgtxt" />
</div>
</div>
<div class="modal-footer">
<button class="btn-primary" id="progrebtn">Save</button>
<button class="btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
我的网络方法：
[WebMethod]
public void updateprogres(int Id,int progress)
{
string constring = System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("UPDATE KPIs SET progress=@progress WHERE [Id] =@Id",conn))
{
try
{
conn.Open();
cmd.Parameters.AddWithValue("@Id", Id);
cmd.Parameters.AddWithValue("@progress", progress);
cmd.ExecuteNonQuery();
}
catch (Exception)
{
}
finally
{
conn.Close();
}
}
}
}
【问题讨论】：
-
在数据表中添加
primary keyid 列，并在前端隐藏。 -
您想在更新发生后更新整个表吗？还是只想更新单元格？
-
嗨@MonkeyDLuffy，是的，我只想更新单元格
标签： jquery asp.net ajax datatables asp.net-ajax