пытается создать редактируемые таблицы

Question

В настоящее время у меня есть asp: gridview, привязанный к набору данных. Мне нужно, чтобы можно было щелкнуть ячейку и сделать ее редактируемой, а затем, когда фокус потерян, обновленное поле сохраняется в базе данных. Если нужно, я могу изменить код из gridview на что-то еще. Метод не важен, просто конечный результат. Таблица, показывающая данные из базы данных, которая позволяет редактировать ячейки внутри строки. Также, возможно, потребуется возможность внести некоторые из редактируемых полей в раскрывающиеся списки, если это возможно. Может ли кто-нибудь помочь мне в этом, какие-либо предложения о существующих плагинах или методах о том, как это сделать, без особых сложностей?

Благодаря

Answer 1

попробовать это (открыть редактируемые клетки с двойным щелчком):

$(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()); 
    }); 
}); 

Answer 2

Вы можете использовать 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 

Answer 3

Я сделал soluton в 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 
    } 
}