Nhấp vào nút jQuery làm mới của jqGrid chỉ kích hoạt một lần

Question

Tôi có mã jQuery sau đây mà tôi đang sử dụng để điền một jqGrid. Nó hoạt động hoàn toàn gửi bài đến trang ASP.NET MVC của tôi trên nhấp chuột đầu tiên của nút. Vấn đề của tôi
là, bất kỳ nhấp chuột nào khác qua lần đầu tiên có vẻ như chạy qua mã jquery khi nhấp vào nút nhưng nó không bao giờ chuyển sang trang POST. Bất kỳ ý tưởng tại sao?

<script type="text/javascript"> 

     $(document).ready(function() { 
      $('#btnSubmit').click(function() { 

       /* Refreshes the grid */ 
       $("#list").jqGrid({ 
        /* The controller action to get the grid data from */ 
        url: '/CRA/AddPart', 
        data: { partNumber: "123"}, 
        datatype: 'json', 
        mtype: 'GET', 
        /* Define the headers on the grid */ 
        colNames: ['col1', 'col2', 'col3', 'col4'], 
        /* Define what fields the row columns come from */ 
        colModel: [ 
        { name: 'col1', index: 'invid', width: 290 }, 
        { name: 'col2', index: 'invdate', width: 290 }, 
        { name: 'col3', index: 'amount', width: 290, align: 'right' }, 
        { name: 'col4', index: 'tax', width: 290, align: 'right'}], 
        height: 'auto', 
        rowNum: 10, 
        rowList: [10, 20, 30], 
        sortname: 'id', 
        sortorder: "desc", 
        viewrecords: true, 
        imgpath: '../../Scripts/jgrid/themes/steel/images', 
        caption: 'Core Return Authorization Contents:', 
        cellEdit: true 
       }); 
      }); 
     }); 

    </script> 

Answer 1

Lý do lưới không tải lại là bạn đang gọi sai phương pháp. Phương pháp jqGrid thực hiện điều này:

1. Kiểm tra bảng xem nó đã là lưới chưa; nếu có, hãy thoát.
2. Biến bảng thành lưới.
3. Nhập trang dữ liệu đầu tiên.

Vì vậy, lần thứ hai bạn gọi phương thức, nó không làm gì, theo bước 1.

Thay vào đó, bạn nên gọi $("#list").trigger("reloadGrid") ngày thứ hai và tất cả nhấp chuột tiếp theo.

Bây giờ, vì mtype của bạn trong các tùy chọn lưới, lưới sẽ thực hiện GET, chứ không phải POST. Vì vậy, nếu POST đến từ nút chính nó (nói cách khác, nó là một đầu vào của loại trình), bạn nên trở lại đúng để chỉ ra rằng trình nên tiếp tục như bình thường.

Answer 2

Dưới đây là giải pháp:

<script type="text/javascript"> 
     var firstClick = true; 
     $(document).ready(function() { 
      $('#btnSubmit').click(function() { 
       if (!firstClick) { 
        $("#list").trigger("reloadGrid"); 
       } 
       firstClick = false; 
       /* Refreshes the grid */ 
       $("#list").jqGrid({ 
        /* The controller action to get the grid data from */ 
        url: '/CRA/AddPart', 
        data: { partNumber: "123"}, 
        datatype: 'json', 
        mtype: 'GET', 
        /* Define the headers on the grid */ 
        colNames: ['col1', 'col2', 'col3', 'col4'], 
        /* Define what fields the row columns come from */ 
        colModel: [ 
        { name: 'col1', index: 'invid', width: 290 }, 
        { name: 'col2', index: 'invdate', width: 290 }, 
        { name: 'col3', index: 'amount', width: 290, align: 'right' }, 
        { name: 'col4', index: 'tax', width: 290, align: 'right'}], 
        height: 'auto', 
        rowNum: 10, 
        rowList: [10, 20, 30], 
        sortname: 'id', 
        sortorder: "desc", 
        viewrecords: true, 
        imgpath: '../../Scripts/jgrid/themes/steel/images', 
        caption: 'Core Return Authorization Contents:', 
        cellEdit: true 
       }); 
      }); 
     }); 

    </script> 

Answer 3

Bởi vì tôi cần phải POST giá trị mới cho các hành động đối với tôi nó không hoạt động "reloadGrid".

Tôi chỉ xóa tất cả nội dung và tạo lại bảng trống.

Trong trường hợp tôi kiểm tra xem lưới có ở đó để ẩn div "biểu đồ trống" không (nó chỉ hiển thị một thông báo). Trong người khác, tôi chỉ làm sạch div bao quanh bảng và sau đó tôi thêm vào bên trong bảng một lần nữa. Khi plugin tìm thấy bảng trống thì plugin sẽ tải lại toàn bộ lưới.

LoadTableData là hàm có chức năng chung để tạo và tải lưới.

Có lẽ giải pháp này không phải là tao nhã, nhưng khi thời gian đang gấp rút ...

$("#btnDownloadsPerFile").click(function() { 
      if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) { 
       $('#chartContainerDownloadsPerFile .emptyChart').hide(); 
      } 
      else { 
       $('#chartContainerDownloadsPerFile').empty(); 
       $('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>'); 
      } 
      LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val()); 
     });