如何实现jqgrid内联编辑和自定义验证?

时间:2012-12-20 07:43:22

标签: jquery jqgrid

我是jqGrid的新手,我正在尝试实现以下方案,但我无法以正确的方式得到它。

这是我的情景:

  1. 我有三行,如个人电子邮件,手机号码和推特网址。它需要有另一个列数据类型,可能是值,如电子邮件,电话和网址。
  2. 现在每行我都会输入需要执行的值 验证,如电子邮件格式或电话格式。
  3. 当我按下添加按钮时,它需要创建一个新行并询问我的信息 每列,如列名称和数据类型。
  4. 当我输入每一行的值时,需要根据它进行验证 数据类型列。
  5. 如果按“编辑”按钮,则整个网格需要可编辑 需要在编辑事件触发后对每个单元格执行验证。
  6. 我的代码:

        $(document).ready(function () {
            //debugger;
            var val;
            var lastsel2;
            jQuery("#list").jqGrid({
                datatype: "local",
                height: 250,
                width: 770,
                colNames: ['Mechanism', 'Data Type', 'Value', 'Active Flag', 'Created'],
                colModel: [
                { name: 'Mechanism', index: 'Mechanism', width: 175, editable: true },
                { name: 'DataType', index: 'Datatype', width: 175, editable: true },
            { name: 'Value', index: 'Value', width: 105, editable: true, editrules: { custom: true, custom_func: validate} },
            {name: 'ActiveFlag', width: 112, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
            { name: 'Created', index: 'Created', width: 124}]
            });
    $('#save').live('click', function () {
                var ids = $("#list").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var val = $("#list").jqGrid('getCell', ids[i], 'Value');
                    var dataType = $("#list").jqGrid('getCell', ids[i], 'DataType');
                    $('#colValue').html(val + dataType);
                    var va = $('#colValue').find('input[name=value]').val();
                    var daT = $('#colValue').find('input[name=Datatype]').attr('value');
    
                    switch (daT) {
                        case "Phone":
                            if (!$.jgrid.isEmpty(va)) {
    
                            }
                            else
                                alert("Phone Number Field is required");
                            break;
                        case "Email":
                            if (!$.jgrid.isEmpty(va)) {
    
                            }
                            else
                                alert("Email Field is required");
                            break;
                        case "URL":
                            if (!$.jgrid.isEmpty(va)) {
                            }
                            else
                                alert("URL Field is required")
                            break;
                        case "":
                            alert("Fields are not null")
                    }
                }
            });
    
            $('input[value=Edit]').click(function () {
                var ids = $('#list').jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    //$('#list').jqGrid('editRow', ids[i]);
                    jQuery('#list').jqGrid('editRow', ids[i], true);
                }
            });
            var data = [{ Mechanism: "Mobile Phone", DataType: "Phone" }, { Mechanism: "Personal Email", DataType: "Email" }, { Mechanism: "Facebook URL", DataType: "URL"}];
            for (var i = 0; i <= data.length; i++)
                jQuery("#list").jqGrid('addRowData', i + 1, data[i]);
            val = i;
    

1 个答案:

答案 0 :(得分:0)

如果我理解你的问题,这一切都归结为验证,可以添加添加编辑功能,然后调用自定义验证。

例如:

jQuery("#list").navGrid('#pager', {
    add: true,
    addtext: 'Add',
    edit: true,
    edittext: 'Edit',
    del: true,
    deltext: 'Del',
    search: true,
    searchtext: 'Find',
    refresh: true
}, //options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_edit
}, // edit options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_add
}, // add options
{}, //del options
{} //search options
);

验证(根据您的需要可能不同或相同)

function validate_add(posdata, obj) {//validation code}

function validate_edit(posdata, obj) {//validation code}

价: jqgrid different editrules for when adding and editing

最后,它会真正清理你编写的一堆代码,试图与网格进行交互以进行验证。