jqxGrid调用addrow方法无法添加行的问题排查求助

问题 #

调用jqxGrid的addrow方法无法添加行，已确认mailQuestionsGridSpec实例存在，控制台无报错。相关代码如下：

触发添加行的逻辑 #

$(document).on("click", "#BtnSendQuestion", function (e) {
    e.preventDefault();
    var privateValue=true;
    var prodData = {
        Rel: parseInt($("#InputRec").val()),
        Rec: true,
        Dep: $("#InputDep").val() == "-1" ? null : $("#InputDep").val(),
        Mai: $("#InputAdd").val(),
        Rece: $("#InputAddQuestionTo").val(),
        Sub: $("#InputAddQuestionS").val(),
        Pri: privateValue
    };
    if (prodData.Dep==null)
    {
        try {
            $("#mailQuestionsGridSpec").jqxGrid('addrow', null, prodData);
        } catch (error) {
            console.error('Error adding row:', error);
        }
    }
});

表格绑定代码 #

gridBindAll({ id: $('#InputRec').val() }, $('#mailQuestionsGridSpec'), "/Sp/GetSp/");

绑定函数的datafields配置 #

var gridBindAll = function (data, gridInput,url) {
    var gridData = Send(data, url);
    var source =
    {
        totalrecords: gridData.Response.length,
        localData: gridData.Response,
        datafields:
            [
                { name: 'Rec', type: 'int' },
                { name: 'Rel', type: 'int' },
                { name: 'Dep', type: 'int' },
                { name: 'Mai', type: 'string' },
                { name: 'Sen', type: 'string' },
                { name: 'Rece', type: 'string' },
                { name: 'Sub', type: 'string' },
                { name: 'Ans', type: 'string' },
                { name: 'Who', type: 'string' },
                { name: 'Upd', type: 'date' }
            ],
        datatype: "array",
    };

....

请问是数据问题还是绑定方式问题导致无法添加行？

分析与解决 #

核心问题是数据不符合grid定义的规则，具体问题点及修正方案如下：

1. 字段匹配问题 #

你构造的prodData里包含未在datafields中定义的Pri字段，同时缺少datafields要求的Sen、Ans、Who、Upd字段。jqxGrid添加行时，若数据缺少已定义的字段（尤其是带类型约束的），会静默失败。

2. 数据类型不匹配 #

• Rec字段：datafields定义为int类型，但你赋值的是布尔值true，需改为1（对应int类型的真值）。
• Dep字段：datafields定义为int类型，选中非-1选项时，直接取val()返回的字符串值未转成int；即使是null，也需在datafields中明确允许该字段为null（添加nullable: true）。

修正后的prodData示例 #

var prodData = {
    Rel: parseInt($("#InputRec").val()),
    Rec: 1, // 布尔值转int类型的1
    Dep: $("#InputDep").val() == "-1" ? null : parseInt($("#InputDep").val()), // 转成int类型
    Mai: $("#InputAdd").val(),
    Rece: $("#InputAddQuestionTo").val(),
    Sub: $("#InputAddQuestionS").val(),
    // 补充grid定义的必填字段，按业务逻辑赋值默认值
    Sen: "",
    Ans: "",
    Who: "",
    Upd: new Date() // 确保是date类型，或按业务规则赋值
    // 移除Pri字段，grid未定义该字段
};

额外优化 #

• 在datafields的Dep字段中添加nullable: true，明确允许空值：

  { name: 'Dep', type: 'int', nullable: true }
  

• 添加行后可调用$("#mailQuestionsGridSpec").jqxGrid('updatebounddata');强制刷新表格，确保新行显示。

内容的提问来源于stack exchange，提问作者wittream