1

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

谢谢

4

3 回答 3

0

如果您愿意，可以使用 SlickGrid。http://mleibman.github.io/SlickGrid/examples/example3-editing.html

或来自这里的一点 javascript http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425 

$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
    });
});


Read more: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425#ixzz2g24Rpq6t
于 2013-09-26T20:24:41.273 回答
0

我在 VS 2010 中为您制作了解决方案。

http://www.fileconvoy.com/dfl.php?id=gf8df2b85b587e3c2999379985e0a4fcad2e7e3a74

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

当动态创建的输入失去焦点时，数据通过 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
    }
}
于 2013-09-26T21:21:44.733 回答
0

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

$(document).ready(function(){
    var c = $(document);


    c.on("dblclick","td",function(){ 
        $(this).html("<input type='text' class='txtEdit' />");
    });

    c.on("focusout",".txtEdit",function(){
        var td = $(this).parent("td");
        td.html($(this).val());
    });
});
于 2013-09-26T20:11:22.397 回答