asp.net JQuery Ajax WebService Gridview 任意 双击 某一列 编辑修改

写一个WebService方法GetAuto,向里边写入方法

[WebMethod]
    public bool UpdateA(string col,string val,string id)
    {
        return BLL.A.UpdateA(col,val,id) > 0 ? true : false;
    }

调用的(DAL,IDAL,BLL)BLL的方法

在这里需要说明一下DAL内的方法(col是要更新的字段,val是要更新字段的值,id是唯一行号)

public int UpdateA(string col,string val,string id)
       {
           try
           {
               SqlHelper DataAs = new SqlHelper();
               string strSql = "update [A] set [" + col + "]='" + val.Trim()+"' where ID='" + id.ToString() + "'";
               return DataAs.ExecSql(strSql) ? 1 : 0;
           }
           catch (Exception ex)
           {
               throw new Exception(ex.Message, ex);
           }
       }

在前台aspx页面写jq方法（引用jq库）

<script src="../JQuery/jquery-1.10.2.js" type="text/javascript"></script> 

页面绑定Gridview并绑定数据

写入jq方法

<script type="text/javascript">
    $(function () {
        var content;
        var indexId = $("#GridView1 td:eq(1)").text();
        var trcol;
        var arr = ['表头1', 'ID', '列1', '列2', '列3', '列4', '列5'];
        $("#GridView1 td:not(:lt(2))").dblclick(function () {
            var clickObj = $(this);
            trcol = arr[$(this).parent().find("td").index($(this)[0])];//获取表头定义的值
            content = clickObj.html().replace(" ", "");//去除html显示的空值
            changeToEdit(clickObj);
        });
        function changeToEdit(node) {
            node.html("");
            var inputObj = $("<input type='text'/>");
            //            inputObj.css("border", "0").css("background-color", node.css("background-color"))
            //.css("font-size", node.css("font-size")).css("height", "20px")
            //.css("width", node.css("width")).val(content).appendTo(node)
            //.get(0).select();
            inputObj.css("border", "0").css("background-color", '#d5d5d5')
.css("font-size", node.css("font-size")).css("height", "20px")
.css("width", node.css("width")).val(content).appendTo(node)
.get(0).select();
            inputObj.click(function () {
                return false;
            }).keyup(function (event) {
                //                var keyvalue = event.which;
                //                if (keyvalue == 13) {
                //                    //node.html(node.children("input").val());
                //                    if (node.children("input").val() != content) {
                //                        if (confirm("是否保存修改的内容？", "Yes", "No")) {
                //                            node.html(node.children("input").val());
                //                        } else {
                //                            node.html(content);
                //                        }
                //                    } else {
                //                        node.html(content);
                //                    }
                //                }
                //                if (keyvalue == 27) {
                //                    node.html(content);
                //                }
            }).blur(function () {
                if ((node.children("input").val() != content) && (node.children("input").val() != " ")) {
                    if (confirm("是否保存修改的内容？", "Yes", "No")) {
                        updateitem(trcol, node.children("input").val(), indexId);
                        //alert(trcol);
                        node.html(node.children("input").val());
                    } else {
                        node.html(content);
                    }
                } else {
                    node.html(content);
                }
            });
        }
        function updateitem(col, val, id) {
            $.ajax({
                type: "POST",
                url: '<%=ResolveUrl("../WebService/GetAuto.asmx/UpdateA") %>',
                data: "{ 'col': '" + col + "','val': '" + val + "','id': '" + id + "'}",
                // 发送信息至服务器时内容编码类型
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msdata) {
                    // AJAX响应被包装到一个d对象里，如{"d":true}, 
                    // 因此需要用到msdata.d来获取请求返回的布尔值
                    if (msdata.d) {
                        alert("保存修改成功！");
                    }
                    else {
                        alert("保存修改失败！");
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert("AJAX错误：" + errorThrown);
                }
            });
        }
    });
    
</script>

这样可以实现双击Gridview中任意一个td,进行编辑,利用AJAX处理数据的update

另外网上查了一下类似文章使用的处理方法觉得不是很好

附上查到的实现[在GridView中针对鼠标单击的某一独立单元格进行编辑]的方法

原文:http://www.codeproject.com/Articles/18136/Edit-Individual-GridView-Cells-in-ASP-NET