試圖創建可編輯表

我目前有一個綁定到數據集的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

試圖創建可編輯表

回答

相關問題