C# 尝试创建可编辑表

我当前有一个asp:gridview绑定到数据集。我需要的是能够单击单元格并使其可编辑，然后当焦点丢失时，更新的字段将保存到数据库中。如果需要，我可以将代码从gridview更改为其他内容。方法并不重要，重要的是最终结果。显示数据库数据的表，允许内联编辑单元格。如果可能的话，还需要能够将一些可编辑字段设置为下拉列表。有人能帮我解决这个问题吗？对现有的插件或方法有什么建议吗

谢谢

试试这个（双击打开一个可编辑的单元格）：

$（文档）.ready（函数（）{
var c=$（文件）；
c、 在（“dblclick”，“td”，function（）{
$（this.html（“”）；
});
c、 on（“focusout”，“.txtEdit”，函数（）{
var td=$（本）.parent（“td”）；
html（$（this.val（））；
});
});

如果您愿意，可以使用SlickGrid

或者从这里开始一点javascript

$（函数（）{
$（“td”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this.children（）.first（）.blur（function（））{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
});
阅读更多：http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425#ixzz2g24Rpq6t

我在VS 2010中为您制作了Solution

其主要思想是使用“数据”属性自定义网格（和网格元素），这些属性将包含有关字段和值的所有必要信息，以便在编辑完成后在服务器端更新

当动态创建的输入失去焦点时，数据通过ajax（通过jQuery）发回服务器

准备网格：

    protected void Page_Load(object sender, EventArgs e)
    {
        var ds = new[] { 
                            new { Id = 0, Name = "Joe" }, 
                            new { Id = 1, Name = "Nick" } 
                       };

        GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);
        GridView1.Attributes.Add("data-upd-route", "GridWorker.aspx");
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }

    public void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("data-id", e.Row.DataItem.GetType().GetProperty("Id").GetValue(e.Row.DataItem, null).ToString());
            e.Row.Cells[1].Attributes.Add("data-col-name", "Name");
            e.Row.Cells[1].Attributes.Add("class", "bg-updatable");
        }
    }

jQuery处理客户端交互

function onGridCellInputBlur(event) {
    var target = $(event.target);

    if (target.val() == target.next().val()) {
        target.closest("td").html(target.next().val());
    }
    else {
        doBackgroundRequest(target);
    }
}

function doBackgroundRequest(descriptiveInitiator) {
var colName = descriptiveInitiator.closest("td").attr("data-col-name");
var colValue = descriptiveInitiator.val();
var entityId = descriptiveInitiator.closest("tr").attr("data-id");
var updRoute = descriptiveInitiator.closest("table").attr("data-upd-route");

$.ajax({
    url: updRoute + "?entityId=" + entityId + "&colName=" + colName + "&colValue=" + colValue,
    type: "POST",
    success: function(p1) {
        descriptiveInitiator.closest("td").html(descriptiveInitiator.val());
    },
    error: function (p1) {
        alert(p1.Message);
    }
    });
}

在服务器端发布后做一些工作

public partial class GridWorker : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var entityId = Request.QueryString["entityId"];
        var colName = Request.QueryString["colName"];
        var colValue = Request.QueryString["colValue"];

        //TODO: do some work
    }
}

function onGridCellInputBlur(event) {
    var target = $(event.target);

    if (target.val() == target.next().val()) {
        target.closest("td").html(target.next().val());
    }
    else {
        doBackgroundRequest(target);
    }
}

function doBackgroundRequest(descriptiveInitiator) {
var colName = descriptiveInitiator.closest("td").attr("data-col-name");
var colValue = descriptiveInitiator.val();
var entityId = descriptiveInitiator.closest("tr").attr("data-id");
var updRoute = descriptiveInitiator.closest("table").attr("data-upd-route");

$.ajax({
    url: updRoute + "?entityId=" + entityId + "&colName=" + colName + "&colValue=" + colValue,
    type: "POST",
    success: function(p1) {
        descriptiveInitiator.closest("td").html(descriptiveInitiator.val());
    },
    error: function (p1) {
        alert(p1.Message);
    }
    });
}

public partial class GridWorker : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var entityId = Request.QueryString["entityId"];
        var colName = Request.QueryString["colName"];
        var colValue = Request.QueryString["colValue"];

        //TODO: do some work
    }
}