jqGrid - 复选框编辑无法编辑选定的行
jqGrid - checkbox editing not able to edit selected row
在我的 jqGrid 中，我有一个也可用于编辑的复选框，即用户可以单击该复选框，该复选框的值将在数据库中更新。那工作正常。但是，当我单击该复选框并尝试再次单击它时，没有任何反应。该行不会被保存。理论上应该保存复选框未选中的值。但这不会发生。
我试过参考 Oleg 的 this 回答，但没有帮助。
奇怪的问题是，如果我 select 另一行然后再次尝试取消 select 复选框，我会看到一个保存请求。
我猜这是因为我正在尝试编辑当前 selected 的行。但是我不确定我在这里做错了什么。
这就是我在 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正在保存到服务器
最小网格代码：jsFiddle
编辑： 在 Oleg 的回答之后，这就是我目前所知道的：
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
}
这很接近我想要的。但是，如果我第一次和第二次在复选框上 select，console.log 确实每次都会被调用。但是 saveRow 仅在我选中该复选框然后再次单击它以第一次取消选中它时才会被调用，之后再也不会。默认情况下，可以根据从服务器发送的数据选中或取消选中该复选框。
在图像中，请求是在select选中复选框两次后发送的，而不是每次都发送。
更新： 根据@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 + ')"';
}
},
和我的select这个函数：
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 {
$("<div title='Error' class = 'ui-state-error ui-corner-all'>" + data.success + "</div>").dialog({});
}
}
});
}
我认为formatter: "checkbox", formatoptions: { disabled: false }的用法有误区。如果您以这种方式在网格列中创建非禁用复选框，则用户只会看到可以单击的复选框以及可以更改其状态的复选框。另一方面，如果用户更改复选框的状态，什么也不会发生。相反，复选框的初始状态对应于网格的输入数据，但更改后的复选框会产生状态已更改的错觉，但不会自动执行任何操作。即使你使用 datatype: "local" 也没有任何反应，甚至本地数据也会在点击时发生变化。如果您确实需要根据更改复选框的状态来保存更改，那么您必须实现额外的代码。 The answer demonstrates a possible implementation. You can change the state of some checkboxes on the corresponding demo，然后换页回到第一页。您会看到复选框的状态对应于最新的更改。
现在让我们尝试在网格的 select 行开始内联编辑（开始 editRow）。首先，内联编辑使用 unformatter 从行（可编辑列）中获取值，将旧值保存在内部 savedRow 参数中，然后 在可编辑的内部创建新的编辑控件 旧内容位置上的单元格。如果使用 formatter: "checkbox" 的标准禁用复选框，一切都相对容易。 jqGrid 只是在禁用复选框的地方创建 enabled 复选框。例如，用户可以更改复选框的状态或任何其他可编辑列的内容，并 保存 更改 Enter。之后，selected 行将被保存并且不再可编辑。您可以另外监视复选框状态的变化（例如，通过使用 editoptions.dataEvents 和 "change" 事件）并在更改状态时调用 saveRow。保存后该行将不可编辑，这一点很重要。如果您确实需要保持该行可编辑，则必须在 成功保存 行后再次调用 editRow 。您可以在 saveRow 的 aftersavefunc 回调中调用 editRow，但我建议您将 editRow 的调用包装在 setTimeout 中，以确保处理之前的保存完成。这是我推荐你的方式。
另一方面，如果您尝试将 formatter: "checkbox" 的 enabled 复选框与内联编辑相结合，那么您将进行更复杂的处理。在 onclick 和 onchange 事件处理程序的 处理之前，首先可以更改启用的复选框很重要。 3 个事件的顺序（更改复选框的状态、onclick 的处理和 onchange 的处理）在不同的 Web 浏览器中可能不同。如果方法 editRow 正在执行，它会使用复选框格式化程序的取消格式化程序来获取 复选框的当前 状态。基于状态 editRow 的值，将单元格的内容替换为另一个启用的复选框的内容。可能是复选框的状态已经改变，但是 editRow 将 the changes state 解释为复选框的 the initial state。同样，在 editRow 之后，只能 调用 saveRow。因此，您不能只在 formatter: "checkbox", formatoptions: { disabled: false } 的 change 处理程序内部使用 saveRow，因为该行尚未处于编辑模式。
已更新： 相应的实现（在使用 formatter: "checkbox", formatoptions: { disabled: 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
}
查看 jsfiddle 演示 http://jsfiddle.net/OlegKi/HJema/190/
在我的 jqGrid 中，我有一个也可用于编辑的复选框，即用户可以单击该复选框，该复选框的值将在数据库中更新。那工作正常。但是，当我单击该复选框并尝试再次单击它时，没有任何反应。该行不会被保存。理论上应该保存复选框未选中的值。但这不会发生。
我试过参考 Oleg 的 this 回答，但没有帮助。
奇怪的问题是，如果我 select 另一行然后再次尝试取消 select 复选框，我会看到一个保存请求。
我猜这是因为我正在尝试编辑当前 selected 的行。但是我不确定我在这里做错了什么。
这就是我在 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正在保存到服务器
最小网格代码：jsFiddle
编辑： 在 Oleg 的回答之后，这就是我目前所知道的：
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
}
这很接近我想要的。但是，如果我第一次和第二次在复选框上 select，console.log 确实每次都会被调用。但是 saveRow 仅在我选中该复选框然后再次单击它以第一次取消选中它时才会被调用，之后再也不会。默认情况下，可以根据从服务器发送的数据选中或取消选中该复选框。
在图像中，请求是在select选中复选框两次后发送的，而不是每次都发送。
更新： 根据@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 + ')"';
}
},
和我的select这个函数：
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 {
$("<div title='Error' class = 'ui-state-error ui-corner-all'>" + data.success + "</div>").dialog({});
}
}
});
}
我认为formatter: "checkbox", formatoptions: { disabled: false }的用法有误区。如果您以这种方式在网格列中创建非禁用复选框，则用户只会看到可以单击的复选框以及可以更改其状态的复选框。另一方面，如果用户更改复选框的状态，什么也不会发生。相反，复选框的初始状态对应于网格的输入数据，但更改后的复选框会产生状态已更改的错觉，但不会自动执行任何操作。即使你使用 datatype: "local" 也没有任何反应，甚至本地数据也会在点击时发生变化。如果您确实需要根据更改复选框的状态来保存更改，那么您必须实现额外的代码。 The answer demonstrates a possible implementation. You can change the state of some checkboxes on the corresponding demo，然后换页回到第一页。您会看到复选框的状态对应于最新的更改。
现在让我们尝试在网格的 select 行开始内联编辑（开始 editRow）。首先，内联编辑使用 unformatter 从行（可编辑列）中获取值，将旧值保存在内部 savedRow 参数中，然后 在可编辑的内部创建新的编辑控件 旧内容位置上的单元格。如果使用 formatter: "checkbox" 的标准禁用复选框，一切都相对容易。 jqGrid 只是在禁用复选框的地方创建 enabled 复选框。例如，用户可以更改复选框的状态或任何其他可编辑列的内容，并 保存 更改 Enter。之后，selected 行将被保存并且不再可编辑。您可以另外监视复选框状态的变化（例如，通过使用 editoptions.dataEvents 和 "change" 事件）并在更改状态时调用 saveRow。保存后该行将不可编辑，这一点很重要。如果您确实需要保持该行可编辑，则必须在 成功保存 行后再次调用 editRow 。您可以在 saveRow 的 aftersavefunc 回调中调用 editRow，但我建议您将 editRow 的调用包装在 setTimeout 中，以确保处理之前的保存完成。这是我推荐你的方式。
另一方面，如果您尝试将 formatter: "checkbox" 的 enabled 复选框与内联编辑相结合，那么您将进行更复杂的处理。在 onclick 和 onchange 事件处理程序的 处理之前，首先可以更改启用的复选框很重要。 3 个事件的顺序（更改复选框的状态、onclick 的处理和 onchange 的处理）在不同的 Web 浏览器中可能不同。如果方法 editRow 正在执行，它会使用复选框格式化程序的取消格式化程序来获取 复选框的当前 状态。基于状态 editRow 的值，将单元格的内容替换为另一个启用的复选框的内容。可能是复选框的状态已经改变，但是 editRow 将 the changes state 解释为复选框的 the initial state。同样，在 editRow 之后，只能 调用 saveRow。因此，您不能只在 formatter: "checkbox", formatoptions: { disabled: false } 的 change 处理程序内部使用 saveRow，因为该行尚未处于编辑模式。
已更新： 相应的实现（在使用 formatter: "checkbox", formatoptions: { disabled: 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
}
查看 jsfiddle 演示 http://jsfiddle.net/OlegKi/HJema/190/