Javascript 带有可编辑复选框列的jqGrid
使用jqGrid时,如何在页面加载和单击时强制单元格在其可编辑视图中加载 如果您像下面那样设置“单元格编辑”,则仅当您单击单元格时,复选框才会出现Javascript 带有可编辑复选框列的jqGrid,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,使用jqGrid时,如何在页面加载和单击时强制单元格在其可编辑视图中加载 如果您像下面那样设置“单元格编辑”,则仅当您单击单元格时,复选框才会出现 { name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, cellEdit:true, 单击复选框后,是否有一种方法可以立即向服务器发送AJAX帖子,而不必依赖用户按enter键?要使复选框始终
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
单击复选框后,是否有一种方法可以立即向服务器发送AJAX帖子,而不必依赖用户按enter键?要使复选框始终可以单击,请使用复选框格式化程序的
禁用属性:
{ name: 'MyCol', index: 'MyCol',
editable:true, edittype:'checkbox', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
要回答第二个问题,您必须为复选框设置一个事件处理程序,以便在单击一个复选框时调用一个函数,例如,向服务器发送一篇AJAX文章。下面是一些示例代码,让您开始学习。您可以将其添加到loadComplete
事件中:
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});
这是一个旧的,但有很多观点,所以我决定在这里添加我的解决方案了
我正在利用JQuery的.delegate函数创建一个后期绑定实现,它将使您不再需要使用loadComplete事件
只需添加以下内容:
$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });
这将延迟将该处理程序绑定到网格行上的每个复选框。
如果有多个复选框列,您可能会遇到问题。我在下面的链接中共享了完整的代码,如果需要,您可以查看
我也遇到了同样的问题,我想我找到了一个很好的解决方案来立即处理复选框单击。其主要思想是在用户单击不可编辑复选框时触发editCell方法。代码如下:
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);
}
});
除此之外,您应该为网格定义事件:
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');
}
},
然后,每当用户单击复选框时,它都会发送编辑请求 我有一个提交函数,它将所有网格行发送到Web服务器
我使用以下代码解决了此问题:
var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
checkboxFix.push($(this).attr('checked'));
});
然后我混合了下面代码中的值
$("#jqTable").jqGrid('getGridParam', 'data');
我希望它能帮助别人。更好的解决方案:
<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>
@贾斯汀回答得很好!!谢谢,如果是我的问题,我会给你打勾。不客气!遗憾的是,这个问题太老了,但希望答案仍然有帮助:)好吧,有点老了-我实际上重新编写了它。代码有点问题,我现在正试图处理,如果用户选择前面的单元格,然后选中(或取消选中)复选框,它尝试触发cellEdit事件并访问cellUrl。如果未定义,它将抛出一条消息,说明缺少,否则将运行事件。如果您有一个点击函数检查和标准jqgrid模型函数试图保存详细信息,那么这将很难处理。我会看得更远,但如果有更优雅的东西,我会在这两种情况下启动jqgrid单元格编辑。谢谢Richard,但我发现这不太管用。我的复选框位于jqGrid的第1列,但是如果用户在该第1列的单元格内单击,而不是在复选框本身上单击,则此代码将错误地触发“checkbox value has changed”(复选框值已更改)函数。对我起作用的是:$('jqGrid').on('change',':checkbox',函数(e){});如果每行中有多个复选框列,您将如何处理?@user1334007这实际上取决于您正在执行的操作。如果您使用网格的内联编辑功能,您仍然可以使用上面的功能,并通过获取其ID来确定单击了哪一个复选框。默认情况下,jqGrid将复选框ID设置为“[rowid]\u[colname]”。因此,从复选框的ID可以知道复选框位于哪一行/哪一列。@user1334007另一个解决方案是稍微更改选择器以添加列名,并为每列创建一个处理程序。老实说,我不认为这是必要的,你的事件听众越少越好。
...
{name:'allowAccess', template: checkboxTemplate},
...