JQGrid: Làm cách nào để làm mới trình đơn thả xuống sau khi chỉnh sửa?

Question

Trong ứng dụng của tôi, tôi sử dụng JQGrid để tải một số dữ liệu danh bạ và khi tôi chỉnh sửa/thêm mục, tôi chọn tên liên hệ từ cơ sở dữ liệu và sau đó cập nhật/thêm liên hệ.

Vấn đề của tôi là, khi tôi nhấp vào nút gửi, tôi muốn làm mới trình đơn thả xuống và dữ liệu đã được nhập để loại bỏ khỏi danh sách thả xuống.

Mã của tôi:

cho colModel:

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} }, 

tôi cư thả xuống trên một số hàng (khi tôi chọn một hàng, thả xuống sẽ được làm mới)

onSelectRow: function (id) { 
       var advOwners = $.ajax({ 
        type: 'POST', 
        data: {}, 
        url: 'MyWebService.asmx/GetOwners', 
        async: false, 
        error: function() { 
         alert('An error has occured retrieving Owners!'); 
        } 
       }).responseXML; 

       var aux = advOwners.getElementsByTagName("string"); 
       ownersList = ""; 
       for (var i = 0; i < aux.length; i++) { 
        ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; '; 
       } 
       ownersList = ownersList.substring(0, ownersList.length - 2); 

       jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} }); 
      } 

Nhưng khi tôi nhập lại chỉnh sửa/thêm biểu mẫu, trình đơn thả xuống không được làm mới, nó có các mục đã được tải ở vị trí đầu tiên.

Bất kỳ trợ giúp nào?

Cảm ơn, Jeff

Answer 1

Tôi nghĩ rằng nó sẽ tốt hơn nếu bạn sẽ sử dụng dataUrl tài sản của editoptions thay vì sử dụng value tài sản. Trong trường hợp này, bạn sẽ không cần phải sử dụng cuộc gọi Ajax đồng bộ bên trong onSelectRow để lấy dữ liệu được chọn theo cách thủ công. Nếu dữ liệu sẽ là cần thiết, cuộc gọi tương ứng sẽ làm jqGrid cho bạn.

URL từ dataUrl phải trả về đoạn HTML cho phần tử <select> bao gồm tất cả <options>. Vì vậy, bạn có thể chuyển đổi bất kỳ phản hồi nào khác từ dataUrl sang định dạng bắt buộc thực hiện chức năng gọi lại buildSelect tương ứng.

Trên vị trí của bạn, tôi muốn trả lại dữ liệu JSON từ URL 'MyWebService.asmx/GetOwners' thay vì dữ liệu XML mà bạn hiện đang thực hiện. Trong trường hợp đơn giản nhất nó có thể là phương pháp web như

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

Nếu bạn muốn sử dụng HTTP GET thay vì HTTP POST bạn nên tránh sử dụng các dữ liệu từ bộ nhớ cache bằng cách thiết lập Cache-Control: private, max-age=0 trong tiêu đề HTTP. mã tương ứng sẽ

[WebMethod] 
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

mỗi mặc định jqGrid sử dụng dataType: "html" trong cuộc gọi Ajax tương ứng (xem the source code). Để thay đổi hành vi để dataType: "json", contentType: "application/json" bạn nên sử dụng thêm các tham số của ajaxSelectOptions jqGrid như

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' }, 

hoặc như

ajaxSelectOptions: { 
    contentType: "application/json", 
    dataType: 'json', 
    type: "POST" 
}, 

nếu bạn sẽ sử dụng HTTP POST đó là mặc định cho các dịch vụ web ASMX.

Các thiết lập tương ứng cho các cột trong colModel sẽ

edittype: 'select', editable: true, 
editoptions: { 
    dataUrl: '/MyWebService.asmx/GetSelectData', 
    buildSelect: buildSelectFromJson 
} 

nơi

var buildSelectFromJson = function (data) { 
     var html = '<select>', d = data.d, length = d.length, i = 0, item; 
     for (; i < length; i++) { 
      item = d[i]; 
      html += '<option value=' + item + '>' + item + '</option>'; 
     } 
     html += '</select>'; 
     return html; 
    }; 

Hãy cẩn thận rằng mã sử dụng trên data.d được yêu cầu trong trường hợp các dịch vụ web ASMX. Nếu bạn sẽ chuyển sang ASP.NET MVC hoặc WCF, bạn sẽ cần xóa quyền sử dụng thuộc tính d và sử dụng trực tiếp data.

CẬP NHẬT: Here bạn có thể tải xuống dự án demo VS2010 thực hiện những gì tôi đã viết ở trên.