jqGrid trình kích hoạt "Đang tải ..." lớp phủ

Question

Có ai biết cách kích hoạt lớp phủ jqGrid "Đang tải ..." được hiển thị khi lưới đang tải không? Tôi biết rằng tôi có thể sử dụng một plugin jquery mà không cần nhiều nỗ lực nhưng tôi muốn có thể giữ cho giao diện của ứng dụng của tôi phù hợp với những gì đã được sử dụng trong jqGrid.

Các đóng điều tôi đã tìm thấy là thế này:

jqGrid display default "loading" message when updating a table/on custom update

• n8

Answer 1

Nếu bạn đang tìm kiếm cái gì đó như DisplayLoadingMessage() chức năng. Nó không tồn tại trong jqGrid. Bạn chỉ có thể đặt tùy chọn loadui của jqGrid thành bật (mặc định), tắt hoặc khối. Cá nhân tôi thích khối. (xem http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Nhưng tôi nghĩ đó không phải là điều bạn muốn.

Điều duy nhất bạn có thể làm, nếu bạn thích thông báo "Đang tải ..." từ jqGrid, hãy thực hiện như vậy. Tôi sẽ giải thích ở đây những gì jqGrid làm để hiển thị thông báo này: Hai div ẩn sẽ được tạo ra. Nếu bạn có một mạng lưới với id = danh sách, các div này sẽ trông giống như sau:

<div style="display: none" id="lui_list" 
    class="ui-widget-overlay jqgrid-overlay"></div> 
<div style="display: none" id="load_list" 
    class="loading ui-state-default ui-state-active">Loading...</div> 

nơi dòng chữ "Loading ..." hoặc "Lädt ..." (bằng tiếng Đức) xuất phát từ $.jgrid.defaults.loadtext. Các id của divs sẽ được xây dựng từ tiền tố "lui_" hoặc "load_" và id lưới ("danh sách"). Trước khi gửi yêu cầu ajax jqGrid làm cho một hoặc hai div này hiển thị. Nó gọi hàm jQuery.show() cho div thứ hai (id = "load_list") nếu tùy chọn loadui là bật. Nếu tùy chọn loadui là khối, tuy nhiên, sau đó cả hai div (id = "lui_list" và id = "load_list") sẽ được hiển thị theo chức năng .show(). Sau khi kết thúc yêu cầu ajax .hide() Chức năng jQuery sẽ được gọi cho một hoặc hai div. Đó là tất cả.

Bạn sẽ tìm thấy định nghĩa của tất cả các lớp css trong ui.jqgrid.css hoặc jquery-ui-1.8.custom.css.

Bây giờ bạn có đủ thông tin để tạo lại jqGrid "Đang tải ...", nhưng nếu tôi là bạn, tôi sẽ nghĩ thêm một lần nữa nếu bạn thực sự muốn làm điều này hoặc liệu jQuery blockUI plugin có tốt hơn cho mục tiêu của bạn hay không.

Answer 2

Kiểu ghi đè là [.ui-jqgrid .loading].

Answer 3

Bạn có thể gọi $ ("# load _"). Hiển thị() và .hide() ở đâu là id của lưới của bạn.

Answer 4

tôi sử dụng

 $('.loading').show(); 
     $('.loading').hide(); 

Nó hoạt động tốt mà không tạo ra bất kỳ divs mới

Answer 5

Tôi chỉ đặt dưới dòng trong onSelectRow trường hợp lưới JQ nó làm việc.

$ ('. Loading').chỉ();

Answer 6

nó đang lo lắng với $ ('div.loading'). Show(); Đây cũng là hữu ích ngay cả các thành phần khác

$('#editDiv').dialog({ 
      modal : true, 
      width : 'auto', 
      height : 'auto', 
      buttons : { 
       Ok : function() { 
        //Call Action to read wo and 
        **$('div.loading').show();** 

        var status = call(...) 
        if(status){ 
         $.ajax({ 
          type : "POST", 
          url : "./test", 
          data : { 
           ... 
          }, 
          async : false, 
          success : function(data) { 

           retVal = true; 
          }, 
          error : function(xhr, status) { 


           retVal = false; 
          } 
         }); 
        } 
        if (retVal == true) { 
         retVal = true; 
         $(this).dialog('close'); 
        } 
        **$('div.loading').hide();** 
       }, 
       Cancel : function() { 
        retVal = false; 
        $(this).dialog('close'); 
       } 

      } 
     }); 

Answer 7

Như đã đề cập bởi @Oleg các có rất nhiều tính năng tốt trong quá trình phát triển một ứng dụng cơ sở ajax. Với nó, bạn có thể chặn toàn bộ giao diện người dùng hoặc một yếu tố cụ thể gọi là element Block

Đối với jqGrid bạn có thể đặt lưới của bạn trong một div (sampleGrid) và sau đó chặn lưới điện như:

$.extend($.jgrid.defaults, { 
    ajaxGridOptions : { 
     beforeSend: function(xhr) { 
      $("#sampleGrid").block(); 
     }, 
     complete: function(xhr) { 
      $("#sampleGrid").unblock(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      $("#sampleGrid").unblock(); 
     } 
    } 
}); 

Answer 8

đơn giản, để hiển thị nó :

$("#myGrid").closest(".ui-jqgrid").find('.loading').show(); 

Sau đó, để che giấu nó một lần nữa

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();