jqGrid复选框不保存

Question

我的 jqGrid 有一列包含一个复选框。我注意到当用户切换复选框时，jqGrid 实际上并没有将该行置于编辑模式。所以当用户点击保存按钮时，复选框的新值不会被保存。

这是 jgGrid 中复选框的默认行为吗？让 jqGrid 保存复选框值的最佳方法是什么？

这里是 jqGrid 代码：

var myGrid = jQuery("#myGrid");

myGrid.jqGrid({
    editurl: 'UpdateData',
    datatype: function (postdata) {
        //some code
    },
    height: "450",
    footerrow: false,
    userDataOnFooter: false,
    autowidth: true,
    viewrecords: true,
    rowNum: 100,
    rowList: [25, 50, 100, 200, 300, 400, 500, 1000],
    sortname: 'SomeId',
    pager: '#footer',
    caption: "",
    colNames: ['Field1', 'Field2'],
    colModel: [
        { name: 'Col1', index: 'Col1', hidden: false, editable: true, sortable: true, search: true },
        { name: 'MyCheckBox', index: 'MyCheckBox', hidden: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false }, search: true }
    ],
    onSelectRow: function (index) {
        myGrid.jqGrid('editRow', index, true);
    }
});

myGrid.jqGrid('navGrid', '#footer',
    { edit: false, add: false, del: false, search: false },
    { closeAfterAdd: true }, // use default settings for edit
    { closeAfterAdd: true, left: ((document.body.clientWidth / 2) - 100), top: ((document.body.clientHeight / 2) - 50) }, // use default settings for add
    { },  // delete instead that del:false we need this
    { multipleSearch: false }, // enable the advanced searching
    { closeOnEscape: true} /* allow the view dialog to be closed when user press ESC key*/
);

myGrid.jqGrid('navButtonAdd', '#footer',
{
    buttonicon: "none",
    caption: "Save",
    onClickButton: function () {
        //save the currently selected row
    }
})

我正在考虑使用 jQuery 为每个复选框附加一个“更改”处理程序，当用户单击复选框时，该处理程序会将该行置于编辑模式。虽然看起来像是一个 hack，但我不确定如何正确识别网格中的复选框列（我的示例仅显示一个复选框，但网格实际上有两个）。

jqGrid 是否支持比这更好的复选框行为？

Answer 1

在我看来，您现在了解自己，您最初假设 formatter: "checkbox" 使用内联编辑（如果使用选项 formatoptions: { disabled: false } 初始化）是错误的。 jqGrid支持树独立编辑模式：单元格编辑、内联编辑和表单编辑。

格式化只是显示输入数据值的形式。例如，可以将0 和1（或true 和false）值显示为Yes 和No 或作为选中按钮或未选中或作为两个不同的图像或作为绿色单元格和red or ... 所以格式化程序的目标是构建 HTML 片段，这些片段将放置在相应列的单元格中。

特别是在使用formatter: "checkbox", formatoptions: { disabled: false } 的情况下，应该实现click 句柄，这将进行一些附加操作，以防更改复选框的状态。在我看来，这种行为的最佳实现可以使用beforeSelectRow 回调来编写。为the answer 创建的The demo 显示了在使用datatype: "local" 的情况下可以做什么。在这种情况下，有内部参数 _index 和 data 保存数据。如果您使用另一个 datatype 值，您有许多实现选项。例如，您可以执行几乎相同的操作，但将复选框的更改状态保存在您的自定义数组或对象中。我建议您阅读the answer 和this one 了解更多信息。

关于您发布的代码的一些常见评论。如果您在内部使用jQuery.ajax，我强烈建议您避免使用定义为函数的datatype。这是局部错误的根源。 jqGrid 提供了很多选项，允许您自定义jQuery.ajax，这使得 jqGrid 本身在使用datatype: "json" 或datatype: "xml" 的情况下。有beforeProcessing回调，ajaxGridOptions选项，jsonReader可以使用函数（见here），colModel中的jsonmap属性，也可以是函数等等。我建议您改用这些功能。

此外，我建议您在网格中添加gridview: true（请参阅here）和autoencode: true 选项，并从colModel 中删除不需要的index 属性和具有默认值的属性 hidden: false，sortable: true，search: true。强烈建议在输入数据中填写id（rowid），或者如果某列已经包含唯一的id值，则使用key: true。