jqgrid blank add dialog box

I have been trying to use jqgrids, default CRUD options. Below is my code:

$("#roleFlexigrid").jqGrid( {
    //url : 'roleList.htm?t=' + new Date().getTime(),
    //method : 'GET',
    datatype : 'jsonstring',
    datastr: gridData,
    colNames : [ 'Name' ],
    colModel : [ {
        name : 'name',
        search : 'true',
        index : 'name',
        width : 665,
        jsonmap : "cell.name"
    } ],
    jsonReader : {
        repeatitems : false,
        root : "rows",
        cell : "cell",
        id : "id",
        page : "page",
        records : "records"
    },
    viewrecords : "true",
    prmNames : {
        rows : "rp",
        sort : "sortname",
        order : "sortorder"
    },
    pager : "#pager",
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    sortorder : "asc",
    sortname : "name",
    caption : "Roles",
    height : 210
});

$("#roleFlexigrid").jqGrid('navGrid', '#pager', {
    add:true,
    del : true,
    search : true,
    refresh : true
}, {}, // edit parameters
        { // add parameters
            url : 'addRole.htm'             
        });

Right now all i am getting is a blank add dialog box, with no fields. How do I configure it to get all the fields and submit url stuff. Also is there a way to custom开发者_如何学Cize these CRUD dialog boxes, like adding/changing message or buttons etc.

Thanks!

Try marking the field as editable:

colModel : [ {
    name : 'name',
    search : 'true',
    index : 'name',
    width : 665,
    jsonmap : "cell.name",
    editable:true
} ],

From the docs:

editable

Defines if the field is editable. This option is used in cell, inline and form modules.

for create customize dialog CRUD in jqgrid, just you make this code in jqgrid script end :

.navButtonAdd("#id_row_grid",{
                                caption:"Title",
                                buttonicon:"ui-icon-select", //for icon
                                onClickButton:function(){ //for button click in pager
                                    jQuery("#id_form_popup").dialog({ //dialog form use for popup after click button in pager
                                        autoOpen:false,
                                        height: 340,
                                        width: 630,
                                        modal:true
                                    });
                                   jQuery("#id_form_popup").dialog("open");
                                  }
                                });

Don't forget for create form for called in button pager jqgrid. just code only for called dialog form, not for create form.Ok. thanks.