jqGrid Hộp thoại Chỉnh sửa Tùy chỉnh

Question

Tôi đang làm việc với một ứng dụng sử dụng jqGrid. Vấn đề là hộp thoại chỉnh sửa sẽ xuất hiện ở hàng chỉnh sửa phải có bố cục cụ thể. Vì vậy, tôi muốn tải nó qua ajax và sau đó gửi dữ liệu trở lại jqGrid theo cách thủ công. Tôi đã tìm kiếm rất nhiều trên các diễn đàn nhưng tôi không thể tìm thấy một ví dụ về làm thế nào để làm điều đó.

Vì vậy, tôi chỉ cần jqGrid để điền vào hộp thoại chỉnh sửa bật lên với nội dung tùy chỉnh từ tập lệnh PHP.

CẬP NHẬT: Ý tưởng là tôi có trình tạo biểu mẫu, trong đó người dùng đặt vị trí/chiều rộng/độ cao/khả năng hiển thị của trường chỉnh sửa ... và điều này phải được sử dụng trong hộp thoại chỉnh sửa.

Answer 1

Bạn có thể sử dụng tùy chọn editfunc hoặc addfunc của navGrid. Nếu ví dụ: editfunc được xác định thì thay vì editGridRow jqGrid sẽ được gọi là editfunc với id của hàng đã chọn làm thông số.

Cách khác bạn có thể sử dụng custom button (xem this answer làm ví dụ).

Để sửa đổi dữ liệu trong bảng sau khi có hộp thoại chỉnh sửa tùy chỉnh, bạn có thể sử dụng chức năng setRowData.

CẬP NHẬT: Nếu bạn chỉ cần thực hiện một số sửa đổi bố cục của hộp thoại chỉnh sửa, bạn có thể sử dụng beforeShowForm để sửa đổi lần thứ.

Answer 2

Bạn có thể kiểm tra điều này Tutorial, là trang web demo chính thức của jqGrid Plugin. Tôi chắc chắn rằng có một số ví dụ về một số "Chỉnh sửa hàng" trong danh mục đó. Bạn cũng có thể xem nhiều ví dụ khác về jqGrid, trong trang web demo này.
Bạn cũng có thể kiểm tra Home page.

Nếu bạn gặp thêm bất kỳ sự cố nào, bạn có thể hỏi tại đây. Tôi đã sử dụng một số ví dụ trong một trong những trang web của khách hàng (bí mật) của tôi, vì vậy nó sẽ dễ dàng thao tác theo nhu cầu của bạn.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Hộp thoại chỉnh sửa của tôi có quá nhiều trường và do đó trở thành quá cao, vì vậy tôi phải đặt các trường cạnh nhau trong 2 cột. Tôi đã làm như sau:

Tôi đã thử nhiều cách khác nhau, bằng cách sử dụng wrap(), v.v. nhưng thấy rằng các giá trị không được đăng lên máy chủ nếu bạn sửa đổi cấu trúc bảng gốc. Vì vậy, tôi chỉ nhân bản các phần tử tr, đặt chúng trong các bảng mới, và giấu những cái cũ. Tôi đã không ẩn toàn bộ bảng, do đó xác thực sẽ vẫn hiển thị. Tôi đặt một onchange trên các yếu tố nhân bản để cập nhật những cái cũ. Điều này làm việc tuyệt vời. Parameter tableName là id phần tử jqgrid của bạn.

var splitFormatted = false; 
function SplitFormatForm(tableName, add) { 
    if (!splitFormatted) { 
    splitFormatted = true; 
    $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>'); 

    var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length; 
    var s = (cc/2) - 1; 

    var x = $("#TblGrid_" + tableName + "> tbody").children("tr"); 
    var i = 0; 
    x.each(function (index) { 
     var e = $(this).clone(); 
     var oldID = e.attr("id") + ""; 
     var newID = oldID; 
     if (oldID.substring(0, 3) === "tr_") { 
      newID = "clone_" + oldID; 
      $(this).css("display", "none"); 
      e.change(function() { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); }); 
      e.attr("id", newID); 

      if (i++ < s) { 
       $("#TblGrid_" + tableName + "_A").append(e); 
      } 
      else { 
       $("#TblGrid_" + tableName + "_B").append(e); 
      } 
     } 
    }); 

    //This hack makes the popup work the first time too 
    $(".ui-icon-closethick").trigger('click'); 
    var sel_id = "'new'"; 
    if (!add) { 
     sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow'); 
    } 
    jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } }); 
}} 

Gọi mã này trong editOptions của bạn như sau:

afterShowForm: function() { SplitFormatForm("SiteAccountsGrid", false); }