Jqgrid自定义编辑模式和验证

时间:2011-12-17 17:19:54

标签: jquery jqgrid

我在“自定义编辑模式”下使用jqgrid时遇到问题。 我正确地构建了网格,并为每行编辑/保存/取消/删除按钮。 对于每个按钮,我将一个函数绑定到每个操作(保存,保存等) 我现在的问题是,当试图检查该字段是否有效时,执行验证功能并触发错误对话框,但是该值被提交给数据库,并且该行不会保持在“编辑模式”中纠正错误。

我也想知道是否可以抑制内置错误对话框,只是突出显示错误的字段。错误消息将在div中显示为摘要。

感谢您的关注

我的相关代码示例

// function to retrieve data to jqgrid
getList();

// grid configuration

$("#list").jqGrid({
    datatype: "local",
    width: 465,
    colNames: ["ID", "Descrição", ""],
    colModel: [
          { name: "id", index: "id", sorttype: "int", hidden: true },
          { name: "descr", index: "descr", editable: true, edittype: "text", editrules: { custom: true, custom_func: checkvalid }
          },
          { name: "action", index: "action", sortable: false, width: 90, search: false} // Botões

        ],
    loadtext: 'A carregar...',
    rowNum: 20,
    rowList: [20, 40, 80, 100, 200],
    ignoreCase: true,
    pager: "#pager",
    sortname: "id",
    viewrecords: true,
    sortorder: "asc",
    caption: "Gestão de tipos",

    gridComplete: function() {
        //load edit buttons
        var ids = $("#list").jqGrid("getDataIDs");
        for (var k = 0; k < ids.length; k++) {
            var id = ids[k];
            var html = "";
            html += "<input id=\"btnEdit" + id + "\" type=\"button\" class=\"JQbutton\" value=\"Editar\" onclick=\"jqGrid_editRow('" + id + "');\"  />";
            html += "<input id=\"btnDelete" + id + "\" type=\"button\" class=\"JQbutton\" value=\"Apagar\" onclick=\"jqGrid_deleteRow('" + id + "');\"  />";
            html += "<input id=\"btnSave" + id + "\" style=\"display: none;\" class=\"JQbutton\" type=\"submit\" value=\"Guardar\" onclick=\"jqGrid_doSave(" + id + ");\"  />";
            html += "<input id=\"btnCancel" + id + "\" style=\"display: none;\" class=\"JQbutton\" type=\"button\" value=\"Cancelar\" onclick=\"jqGrid_restoreRow('" + id + "');\" />";
            $("#list").jqGrid("setRowData", id, { action: html });
        }
    }

});


function checkvalid(value, colname) {
    //-... code to validate field 

    return [false, "testing validation"];

}

1 个答案:

答案 0 :(得分:6)

您可以验证beforeSubmit function中的表单字段。在此函数中,您可以验证字段并将突出显示类添加到所需的元素。你可以这样做:

beforeSubmit: function(postdata, formid){ 
       //more validations
       if ($('#exec').val()==""){
                $('#exec').addClass("ui-state-highlight");
                return [false,'ERROR MESSAGE']; //error
      }
      return [true,'']; // no error
 },