Nút xóa tùy chỉnh trong jqGrid

Question

Tôi muốn triển khai chức năng xóa của riêng mình trong jqGrid. Tôi hiện đang sử dụng giao diện người dùng tích hợp (chọn hàng, nhấn nút thùng rác ở chân trang, xác nhận) nhưng tôi muốn có nút xóa trong mỗi hàng và triển khai giao diện người dùng của riêng tôi để xác nhận.

Tôi không thấy bất kỳ điều gì trong số API cho phép tôi kích hoạt xóa đối với máy chủ - chỉ delRowData, xóa nó trên máy khách. Điều này có thể được thực hiện?

(Tôi đang sử dụng ASP.NET component, FWIW).

Answer 1

@Erik đã đưa tôi đi đúng hướng trên con đường này. Giải pháp của anh ta hoạt động, nhưng vẫn giữ nguyên giao diện người dùng xác nhận popup giả hiện có mà tôi muốn tránh.

Nó cũng không tận dụng các dịch vụ mà JqGrid ASP.NET component cung cấp. Các thành phần thực sự chăm sóc của tất cả các hoạt động CRUD miễn là nó có dây lên đến một nguồn dữ liệu được cấu hình đúng (ObjectDataSource, SqlDataSource, vv).

Phần còn thiếu của tôi là cơ chế đằng sau các hoạt động CRUD của thành phần. Bằng cách chọc xung quanh với Fiddler tôi đã có thể thấy rằng nó viết các dữ liệu liên quan đến cùng một trang, với ClientID của đối tượng jqGrid trong chuỗi truy vấn:

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

Đối xóa, nội dung của các POST như @ Erik mô tả:

oper=del&id=18

vì vậy, tôi đã có thể lặp lại trong các hoạt động trên của riêng tôi vì vậy mà tôi giữ kiểm soát hoàn toàn của toàn bộ quá trình:

$(".DeleteButton", grid).click(function(e) { 
    var rowID = getRowID(this); 
    $(grid).setSelection(rowID, false); 
    if (confirm('Are you sure you want to delete this row?')) { 
     var url = window.location + '?jqGridID=' + grid[0].id; 
     var data = { oper: 'del', id: rowID }; 
     $.post(url, data, function(data, textStatus, XMLHttpRequest) { 
      $(grid).trigger("reloadGrid"); 
     }); 
    } else { 
     $(grid).resetSelection(); 
    } // if 
}); // click 

getRowID = function(el) { 
    return $(el).parents("tr").attr("id"); 
}; 

Answer 2

Không có phần nào của thành phần jqGrid cơ bản xử lý xóa phía máy chủ - ngay cả khi bạn sử dụng tính năng xóa được tích hợp sẵn, nó không xóa phía máy chủ cho bạn, bạn phải tự mình xử lý. Nhưng đây là làm thế nào để thiết lập nó để kịch bản của bạn được gọi là khi ai đó nhấp tùy chỉnh của bạn nút xóa:

// your custom button is #bDelete 
$("#bDelete").click(function(){ 

    // Get the currently selected row 
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow'); 

    // You'll get a pop-up confirmation dialog, and if you say yes, 
    // it will call "delete.php" on your server. 
    $("#mygrid").jqGrid(
     'delGridRow', 
     toDelete, 
      { url: 'delete.php', 
      reloadAfterSubmit:false} 
    ); 
}); 

Thông tin sau đây là quá khứ qua POST để URL xóa của bạn

Array 
(
    [oper] => del 
    [id] => 88 
) 

đâu id là rõ ràng id bạn đã chuyển vào hàm trong trường hợp này, giá trị là toDelete.

Tôi thực sự đã làm điều này cho dự án của riêng tôi, để trả lời câu hỏi của bạn - mặc dù tôi đã có một ý tưởng mơ hồ về cách làm điều đó trước khi tôi nhìn thấy câu hỏi. Vì vậy ... cảm ơn vì đã giúp tôi đạt được điều đó!

Answer 3

giải pháp khác là chương trình nhấn chuột vào biểu tượng xóa (nếu có). Id cho biểu tượng xóa (thực ra là div) là "del_ [GridId]". Đây có thể không phải là một giải pháp hoàn toàn vững chắc vì chúng có thể thay đổi cách đặt tên id đó. Nhưng bạn nhận được chính xác cùng một hành vi (và cũng là phương thức xác nhận đẹp hơn).

Ví dụ:

$('#MyButton').click(function() { $('#del_' + gridId).click(); });