html 复选框 不能编辑,javascript-jqGrid-复选框编辑无法编辑所选行
在我的jqGrid中,我有一个复选框,该复选框也可用于编辑,即用户可以单击该复选框,并且该复选框的值将在数据库中更新.很好但是,当我单击复选框时,如果再次尝试单击它,则什么也没有发生.该行不会保存.理论上,复选框的未选中值应保存.但这不会发生.
我曾尝试参考Oleg的this答案,但这无济于事.
奇怪的问题是,如果我选择另一行,然后尝试再次取消选中该复选框,则会看到保存请求.
我猜这是因为我正在尝试编辑当前选中的行.但是我不确定我在做什么错.
这就是我在beforeSelectRow中所做的
beforeSelectRow: function (rowid, e) {
var $target = $(e.target),
$td = $target.closest("td"),
iCol = $.jgrid.getCellIndex($td[0]),
colModel = $(this).jqGrid("getGridParam", "colModel");
if (iCol >= 0 && $target.is(":checkbox")) {
if (colModel[iCol].name == "W3LabelSelected") {
console.log(colModel[iCol].name);
$(this).setSelection(rowid, true);
$(this).jqGrid('resetSelection');
$(this).jqGrid('saveRow', rowid, {
succesfunc: function (response) {
$grid.trigger('reloadGrid');
return true;
}
});
}
}
return true;
},
组态:
jqGrid版本:最新免费的jqGrid
数据类型:Json被保存到服务器
编辑:在奥列格的答案后,这就是我到目前为止:
beforeSelectRow: function (rowid, e) {
var $self = $(this),
iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
cm = $self.jqGrid("getGridParam", "colModel");
if (cm[iCol].name === "W3LabelSelected") {
//console.log($(e.target).is(":checked"));
$(this).jqGrid('saveRow', rowid, {
succesfunc: function (response) {
$grid.trigger('reloadGrid');
return true;
}
});
}
return true; // allow selection
}
这接近我想要的.但是,如果我第一次和第二次在复选框上选择,console.log确实会被每次调用.但是,只有在我选中该复选框,然后再次单击它时,才会调用saveRow,以在第一次时取消选中它,之后再也没有.默认情况下,可以根据服务器发送的数据选中或取消选中此复选框.
在图像中,两次选中复选框后发送请求,而不是每次发送.
更新:按照@Oleg的建议,我实现了cellattr并在其中调用了一个函数.在函数中,我只是传递了rowid并更新了服务器上该rowid的复选框.
这是我使用的代码:
{
name: 'W3LabelSelected',
index: 'u.W3LabelSelected',
align: 'center',
width: '170',
editable: false,
edittype: 'checkbox',
formatter: "checkbox",
search: false,
formatoptions: {
disabled: false
},
editoptions: {
value: "1:0"
},
cellattr: function (rowId, tv, rawObject, cm, rdata) {
return ' onClick="selectThis(' + rowId + ')"';
}
},
和我的selectThis函数:
function selectThis(rowid) {
$.ajax({
type: 'POST',
url: myurl,
data: {
'id': rowid
},
success: function (data) {
if (data.success == 'success') {
$("#list").setGridParam({
datatype: 'json',
page: 1
}).trigger('reloadGrid');
} else {
$("
").dialog({});
}
}
});
}
解决方法:
我认为格式化程序的用法存在误解:“复选框”,formatoptions:{禁用:false}.如果您以这种方式在网格的列中创建了非禁用复选框,那么用户将只看到该复选框,可以单击该复选框并更改其状态.另一方面,如果用户更改复选框的状态,则什么也不会发生.相反,复选框的初始状态对应于网格的输入数据,但是更改后的复选框使人幻想状态已更改,但是不会自动进行任何操作.即使您使用数据类型:“本地”,也不会发生任何事情,甚至在单击时也会更改本地数据.如果确实需要基于更改复选框的状态来保存更改,则必须实现其他代码. The answer演示了一种可能的实现.您可以更改the corresponding demo上某些复选框的状态,然后更改页面并返回第一页.您将看到复选框的状态与最新更改相对应.
现在让我们尝试在选择网格的行上开始内联编辑(开始editRow).首先,内联编辑使用unformatter从行(可编辑列)中获取值,将旧值保存在内部saveRow参数中,然后在可编辑单元格内的旧内容上创建新的编辑控件.使用格式化程序的标准禁用复选框:“复选框”,一切都相对容易. jqGrid只会在禁用复选框的位置上创建启用的复选框.用户可以更改复选框的状态或任何其他可编辑列的内容,并通过使用Enter键保存更改.之后,所选行将被保存,并且将无法再进行编辑.您还可以监视复选框状态的更改(例如,通过使用带有“ change”事件的editoptions.dataEvents),并在更改状态时调用saveRow.重要的是,保存后该行不可编辑.如果确实需要使该行保持可编辑状态,则必须在成功保存该行后再次调用editRow.您可以在saveRow的aftersavefunc回调内部调用editRow,但是我建议您将setRout的调用包装在setTimeout内部,以确保先前保存的处理完成.这就是我推荐您的方式.
另一方面,如果您尝试将格式化程序的已启用复选框:“复选框”与内联编辑结合起来,那么处理将更加复杂.重要的是,在处理onclick和onchange事件处理程序之前,可以首先更改已启用的复选框.在不同的Web浏览器中,3个事件的顺序(更改复选框的状态,onclick的处理和onchange的处理)可以不同.如果正在执行方法editRow,则它使用checkbox-formatter的unformatter来获取复选框的当前状态.根据状态editRow的值,用另一个启用的复选框将单元格的内容替换为另一内容.可能是复选框的状态已更改,但是editRow会将更改状态解释为类似于复选框的初始状态.以同样的方式,只有在editRow之后才能调用saveRow.因此,您不能只在格式化程序的更改处理程序内部使用saveRow:“复选框”,formatoptions:{禁用:false},因为该行尚未处于编辑模式.
更新:相应的实现(如果使用格式设置程序:“复选框”,格式选项:{禁用:假})可以是以下内容:
editurl: "SomeUrl",
beforeSelectRow: function (rowid, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
p = $self.jqGrid("getGridParam"),
savedRow = p.savedRow,
cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null,
cmName = cm != null && cm.editable ? cm.name : "Quantity",
isChecked;
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
if (cm != null && cm.name === "W3LabelSelected" && $(e.target).is(":checkbox")) {
if (savedRow.length > 0) {
// some row is editing now
isChecked = $(e.target).is(":checked");
if (savedRow[0].id === rowid) {
$self.jqGrid("saveRow", rowid, {
extraparam: {
W3LabelSelected: isChecked ? "1" : "0",
},
aftersavefunc: function (response) {
$self.jqGrid("editRow", rowid, {
keys: true,
focusField: cmName
});
}
});
}
} else {
$.ajax({
type: "POST",
url: "SomeUrl", // probably just p.editurl
data: $self.jqGrid("getRowData", rowid)
});
}
}
if (rowid) {
$self.jqGrid("editRow", rowid, {
keys: true,
focusField: cmName
});
}
return true; // allow selection
}
标签:javascript,jquery,jqgrid,free-jqgrid
来源: https://codeday.me/bug/20191012/1901827.html
html 复选框 不能编辑,javascript-jqGrid-复选框编辑无法编辑所选行相关推荐
- php 复选框全选和取消,基于JavaScript实现复选框的全选和取消全选
这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考, ...
- html获取复选框的值,JavaScript获取复选框的值
... //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); var months="";var mont ...
- html中输出的文本框,如何将JavaScript输出到文本框中
对不起,我对 JavaScript编码很新.我正在尝试制作一个简单的程序,它接受两个输入,基本和高度,并输出三角形的区域. 我的HTML是这样的: Width (b): Height (h): Cal ...
- PHP更改表格里文本框的值,JavaScript获取/更改文本框的值的实例代码
尽管和是不同元素,但它们均支持同样的特性来获取包含在文本框内的文本.考虑以下例子: Retrieying a Textbox Value Example function getValues(){ v ...
- html下拉复选框联动,HTML : CheckBox 复选框成组联动(JavaScript)
在页面中,经常需要控制一组 CheckBox 的选中状态,常用的操作有: 1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态. 2.根据一组 CheckBox 的选中状态来决定某些控件 ...
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择 在jQuery中,选中checkbox通用的两种方式 ...
- python图形编程复选按钮和单选按钮详细说明_Python_tkinter_单选框(Radiobutton)与复选框(Checkbutton)...
单选框(Radiobutton)与复选框(Checkbutton) thinter.Radiobutton(用于存放的父组件,属性参数...) thinter.Checkbutton(用于存放的父组件 ...
- 用 Javascript 验证表单(form)中多选框(checkbox)值
和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkbox 和普通的文本框在获取值的时候有很大不同,本文介绍了一个 ...
- flutter 全选_Flutter笔记19:CheckBoxListTitle复选框实现全选全不选
CheckBoxListTitle复选框是比CheckBox更加强大的复选框,当然,CheckBoxListTitle实现的效果,用CheckBox也能实现,只不过布局更加麻烦点.这里是用CheckB ...
最新文章
- 提高班第三周周记(中秋第二天)
- 万能的Python,不仅能开发效率高,还能绘画各种漫画图像
- mysql常用管理命令
- Qt工作笔记-Linux上字体问题,导致所有文字重叠在一起
- 苹果赢了!iOS14隐私功能并不违反法国反垄断法
- BERT4Rec:当NLP王者BERT进军推荐领域
- PHP 基于 SW-X 框架,搭建RPC微服务支持
- 解决新用户注册Kaggle无法显示验证码的问题
- pgAdmin III简介
- plsql导出数据字典
- 基于WIKI中文语料·Word2Vec模型训练·Python
- win10系统安装win10虚拟机连接局域网
- 手机服务器连接视频文件夹吗,巧用手机自带功能向电脑传输视频 华为小米苹果均适用...
- 《犯罪心理学》读书笔记(part10)--犯罪心理的性别差异(上)
- Matlab函数psf2otf()的python实现
- 写技术指标的一般方法
- mysql主从复制实验(附编译安装mysql脚本)
- BIOS禁用Intel HD Graphics
- cinema4d 的背景图片插入不显示的原因
- 基于Beacon技术的智慧校园解决方案