jqGrid với cột hộp kiểm có thể chỉnh sửa

Question

Khi sử dụng jqGrid làm cách nào để bạn buộc một ô tải trong chế độ xem có thể chỉnh sửa của nó khi tải trang cũng như khi được nhấp?

Nếu bạn thiết lập 'chỉnh sửa ô' như dưới đây, hộp kiểm chỉ xuất hiện khi bạn nhấp vào ô.

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, 

cellEdit:true, 

Ngoài ra khi nhấp vào, có cách gửi bài đăng AJAX đến máy chủ ngay lập tức thay vì phải dựa vào người dùng nhấn enter không?

Answer 1

Để cho phép các hộp kiểm để luôn nhấp thể, sử dụng disabled tài sản định dạng hộp kiểm của:

{ name: 'MyCol', index: 'MyCol', 
    editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
    formatter: "checkbox", formatoptions: {disabled : false} , ... 

Để trả lời câu hỏi thứ hai của bạn, bạn sẽ phải thiết lập một trình xử lý sự kiện cho các hộp kiểm, như vậy mà khi một là nhấp vào một chức năng được gọi là, ví dụ, gửi một POST AJAX đến máy chủ. Dưới đây là một số mã ví dụ để giúp bạn bắt đầu. Bạn có thể thêm video này vào sự kiện loadComplete:

// Assuming check box is your only input field: 
    jQuery(".jqgrow td input").each(function(){ 
     jQuery(this).click(function(){ 
      // POST your data here... 
     }); 
    }); 

Answer 2

Đây là một cái cũ nhưng có rất nhiều điểm vì vậy tôi quyết định thêm giải pháp của tôi ở đây quá.

Tôi đang sử dụng hàm .delegate của JQuery để tạo triển khai ràng buộc muộn sẽ giải phóng bạn khỏi nghĩa vụ sử dụng sự kiện loadComplete.

Chỉ cần thêm những điều sau đây:

$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); }); 

này sẽ trễ ràng buộc xử lý mà cho tất cả các hộp kiểm đó là trên các hàng lưới. Bạn có thể gặp sự cố ở đây nếu bạn có nhiều cột hộp kiểm.

Answer 3

Tôi đã chia sẻ mã đầy đủ ở liên kết bên dưới, bạn có thể xem nếu bạn cần.

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Answer 4

tôi đã cùng một vấn đề và tôi giả sử rằng tôi tìm thấy một giải pháp tốt để xử lý các hộp kiểm bấm ngay lập tức. Ý tưởng chính là kích hoạt phương thức editCell khi người dùng nhấp vào hộp kiểm không thể chỉnh sửa. Đây là mã:

 jQuery(".jqgrow td").find("input:checkbox").live('click', function(){ 
      var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id')); 
      var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td')); 
      //I use edit-cell class to differ editable and non-editable checkbox 
      if(!$(this).parent('td').hasClass('edit-cell')){ 
            //remove "checked" from non-editable checkbox 
       $(this).attr('checked',!($(this).attr('checked'))); 
         jQuery("#grid").editCell(iRow,iCol,true); 
      } 
    }); 

Ngoại trừ điều này, bạn nên xác định sự kiện cho lưới của bạn:

  afterEditCell: function(rowid, cellname, value, iRow, iCol){ 
      //I use cellname, but possibly you need to apply it for each checkbox  
       if(cellname == 'locked'){ 
       //add "checked" to editable checkbox 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked'))); 
          //trigger request 
        jQuery("#grid").saveCell(iRow,iCol); 
       } 
      }, 

      afterSaveCell: function(rowid, cellname, value, iRow, iCol){ 
       if(cellname == 'locked'){ 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell'); 
       } 
      }, 

Sau đó, hộp kiểm của bạn sẽ gửi yêu cầu chỉnh sửa mỗi khi người dùng nhấp vào nó.

Answer 5

Tôi có một chức năng gửi gửi tất cả các hàng lưới tới máy chủ web.

tôi giải quyết vấn đề này sử dụng mã này:

var checkboxFix = []; 
$("#jqTable td[aria-describedby='columnId'] input").each(function() { 
     checkboxFix.push($(this).attr('checked')); 
}); 

Sau đó, tôi trộn với giá trị nhận được từ các mã dưới đây.

$("#jqTable").jqGrid('getGridParam', 'data'); 

Tôi hy vọng nó sẽ giúp ai đó.giải pháp

Answer 6

tốt hơn:

<script type="text/javascript"> 
    var boxUnformat = function (cellvalue, options, cell) { return '-1'; }, 
     checkboxTemplate = {width:40, editable:true, 
      edittype: "checkbox", align: "center", unformat: boxUnformat, 
      formatter: "checkbox", editoptions: {"value": "Yes:No"}, 
      formatoptions: { disabled: false }}; 
    jQuery(document).ready(function($) {   
     $(document).on('change', 'input[type="checkbox"]', function(e){ 
      var td = $(this).parent(), tr = $(td).parent(), 
       checked = $(this).attr('checked'), 
       ids = td.attr('aria-describedby').split('_'), 
       grid = $('#'+ids[0]), 
       iRow = grid.getInd(tr.attr('id')); 
       iCol = tr.find('td').index(td); 
      grid.editCell(iRow,iCol,true); 
      $('input[type="checkbox"]',td).attr('checked',!checked); 
      grid.saveCell(iRow,iCol); 
     }); 
    }); 
</script> 

Trong colModel của bạn:

... 
{name:'allowAccess', template: checkboxTemplate}, 
...