Question

如何验证jqgrid中的表单（单选框，密码，textfeild，下拉列表，textarea，Email，Phonenumber）？另外，如何增加和减少添加弹出框的大小？

var mydata =[
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"},
{id:"LST 0457",employe:"naveena",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"},
{id:"LST 0458",employe:"anil",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf"},
{id:"LST 0459",employe:"ajay",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf"},
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"}]


$(document).ready(function() {
        setupGrid();
       option();
        attachDeleteButton();
    });     

    //Build radio button
function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="Male"';
    var breakline = '/>Male<br>';
    var naradio = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="receivednaradio" value="Female"';
    var endnaradio = '/>Female<br>';
    if (value == 'Male') {
        var radiohtml = receivedradio + 'checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'Female') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};      



function dataSentOK(){
    jQuery("#navgrid4").jqGrid().trigger("reloadGrid");
}



function setupGrid(){
jQuery("#navgrid4").jqGrid({
url:'editing.php?q=1',
data:mydata,
postData: sopt,
datatype:"local",
colNames:['Id','Employee Name','gender','Role','Department','Join Date','Description'],

    colModel:[
    {name:'id',index:'id', width:55, editable:false,editrules:{required:true},searchoptions:{sopt: ['eq', 'ne']}},            
    {name:'employe',index:'employe', width:90,editable:true,formoptions:{rowpos:2,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},editrules:{required:true}},
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:4,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'role',index:'role', width:100,editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:3,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'department',index:'department', width:80, align:"right",editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:5,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'joinedate',index:'joinedate', width:80,
        editable:true,
        editoptions:{size:12,
            dataInit:function(el){
                $(el).datepicker({dateFormat:'yy-mm-dd '});
            },
            defaultValue: function(){
                var currentTime = new Date();
                var month = parseInt(currentTime.getMonth() + 1);
                month = month <= 9 ? "0"+month : month;
                var day = currentTime.getDate();
                day = day <= 9 ? "0"+day : day;
                var year = currentTime.getFullYear();
                return year+"-"+month + "-"+day;                
            }
        },
        formoptions:{ rowpos:6,elmsuffix:"  yyyy-mm-dd", elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},
        editrules:{required:true}
    },      
    {name:'description',index:'description', width:55, editable:true,editrules: {required:true},formoptions:{rowpos:7,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},

],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pagernav4',
    sortname: 'employe',
    mtype: 'GET',
    viewrecords: true,
    sortorder: "desc",      
    caption:"Navigator Example",
    editurl:"someurl.php",
    multiselect:true,
    height:350,   
    width:600
    });
jQuery("#navgrid4").jqGrid('navGrid','#pagernav4',
{view:true,add:true,search:true, multipleSearch: true,edit:true}, 

{jqModal:true,checkOnUpdate:true,savekey: [true,13], navkeys: [true,38,40],    checkOnSubmit:true, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"});
}

在上面的代码中那些我想添加验证的那些领域请回复我

谢谢你

Answer 1

您可以通过为要验证的每个列数据设置和事件处理程序来实现验证。

例如：

 $self.jqGrid("setColProp", "ColumnName", {
                    editoptions: {
                        dataEvents: [
                                {
                                    type: 'blur',  ---> Event 
                                    fn: function (e) {
                                        var rowId = $(e.target).closest('tr.jqgrow').attr('id');
                                        var row = $(e.target).closest('tr.jqgrow');
                                        var RowData = $("#tablename").getRowData(rowId);
                                        var Param1 = RowData.ColumnName;

                                      Write your validation logic here 

                                    }
                                }
                                ]
                    }
                });

您可以使用常规表达来验证

希望这会有所帮助..

注意：事件可能会模糊或改变或任何依赖于控件的事物

验证表单如何表示jqgrid中的电子邮件，名称，语音，描述

1 个答案: