JQgrid hộp kiểm trên cơ sở dữ liệu cập nhật nhấp chuột

Question

Tôi có một cột hộp kiểm trong JqGrid của tôi được tải từ DB, do đó, nó được kiểm tra hoặc không được kiểm tra khi nó được tải.

Điều tôi muốn là: Nếu hộp kiểm đang được kiểm tra hoặc bỏ ghim bởi người dùng, tôi muốn cập nhật DB trong cùng một lúc. Tôi không muốn người dùng nhấn enter hoặc bất cứ điều gì. chỉ 1 cú nhấp chuột và gửi hành động đến DB

tên: 'Aktiv', chỉ mục: 'Aktiv', chiều rộng: 100, edittype: 'checkbox', căn chỉnh: 'center', formatter: "checkbox", editable: true, formatoptions: {khuyết tật: false}

Answer 1

Bạn có thể đặt một handler click sự kiện bên trong loadComplete:

loadComplete: function() { 
    var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i, 
     c = rows.length; 

    for (i = 1; i < c; i += 1) { 
     $(rows[i].cells[iCol]).click(function (e) { 
      var id = $(e.target).closest('tr')[0].id, 
       isChecked = $(e.target).is(':checked'); 
      alert('clicked on the checkbox in the row with id=' + id + 
       '\nNow the checkbox is ' + 
       (isChecked? 'checked': 'not checked')); 
     }); 
    } 
} 

nơi

var getColumnIndexByName = function(grid, columnName) { 
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l; 
    for (i = 1, l = cm.length; i < l; i += 1) { 
     if (cm[i].name === columnName) { 
      return i; // return the index 
     } 
    } 
    return -1; 
}; 

Thay vì alert bạn nên sử dụng jQuery.ajax để gửi thông tin đến máy chủ về việc cập nhật trạng thái hộp kiểm.

Bạn có thể xem bản trình diễn here.

Answer 2

Chỉnh sửa nhỏ trong hàm loadComplete: function(). trong bản demo, bạn có thể thấy rằng ngay cả sau khi hộp kiểm được chọn, nếu bạn nhấp vào bên ngoài hộp kiểm trong ô đó, giá trị được thay đổi thành 'false' từ 'true'.

Để tránh điều này, chỉ cần đặt tiêu điểm chính xác vào hộp kiểm bằng cách thực hiện như sau.

for (i = 1; i < c; i += 1) { 
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { 
     var id = $(e.target).closest('tr')[0].id, 
      isChecked = $(e.target).is(':checked'); 
     alert('clicked on the checkbox in the row with id=' + id + 
       '\nNow the checkbox is ' + 
       (isChecked? 'checked': 'not checked')); 
    }); 
} 

và cảm ơn cho câu trả lời :-) (@Oleg) đã giúp tôi một thời gian lot..in tất nhiên ..;)

Answer 3

Để thay đổi giá trị của cột khác dựa trên bấm vào hộp kiểm

var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'), 
    rows = this.rows, 
    i, 
    c = rows.length; 

for (i = 1; i < c; i += 1) { 
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { 
     var id = $(e.target).closest('tr')[0].id; 
     isChecked = $(e.target).is(':checked'); 
     var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(); 
     $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10); 
    }); 
}