Question

我正在使用jQuery dataTables，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">&times;</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();
                }
            }
        }
    }

Answer 1

使用ajax帖子的成功方法。找到您要更新的td的索引并为其设置进度。喜欢；

   $("#progrebtn").closest("tr").find("td:eq(4)").text(progress);

https://codepen.io/anon/pen/oQaWeg

Answer 2

因此，对于我的问题，我现在设法解决了，我的错误是我缺少另一个参数，那就是我要更新的参数。立即检查JS功能

 function updateprogress(Id) {

        // var url = "MyService.asmx/getProgress?Id=" + Id+"";

        var urll = "MyService.asmx/updateprogres?Id=" + Id + "&progress=" + $('#pgtxt').val() + "";

        $("#progrdata").load(urll, function () {
            $("#progressmodal").modal("show");

            $("#progrebtn").click(function () {

                var progress = $('#pgtxt').val();

                $.ajax({
                    type: "POST",
                   url: urll,
                    contentType: "application/json;charset=utf-8",
                    datatype: "json",
                    data: '{Id: ' +Id + ', progress: "' + progress + '" }',
                    success: function () {
                        $("#progrebtn").closest("tr").find("td:eq(4)").text(400);
                        $('#progressmodal').modal('hide');
                    },

                });


            });
        })




    }

jQuery DataTables编辑jquery dataTable中的行并将其保存到数据库

2 个答案: