试图创建可编辑表

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

感谢

来源

2013-09-26 Mark Highfield

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

$(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-26 20:11:22

，如果你喜欢，你可以使用SlickGrid。 http://mleibman.github.io/SlickGrid/examples/example3-editing.html

或从这里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-26 20:24:41 adt

一些JavaScript我在2010年提出VS为soluton你。

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

主要思想是定制与“数据”属性网格（并网元素），将包含有关字段和值的所有所需的信息编辑结束时在服务器端进行更新。

当dinamically创建的输入丢失焦点时，数据通过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-26 21:21:44 kokosda

试图创建可编辑表

回答

相关问题