jQuery Grid Plugin - jqGrid

This is my grid setting:

$('#shengxiao_year_detail_tbl').jqGrid({
    url: 'admin/year_list?t=year',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['序列号','年份（生肖）', '分类名称', '性别', '描述'],
    colModel: [
        {name: 'id', index: 'id', align: 'center'},
        {name: 'shengxiao_year_id', index: 'shengxiao_year_id', align: 'center', editable:true, edittype:'select', editoptions: {dataUrl: 'select/get_opt_data?entity=shengxiao_year'}, formatter: 'yearShengxiaoIdFmatter'},
        {name: 'category_id', index: 'category_id', align: 'right', editable:true, edittype:'select', editoptions: {dataUrl: 'select/get_opt_data?entity=category'}, formatter: 'categoryFmatter'},
        {name: 'sex', index: 'sex', align: 'right', editable:true, edittype:'select', editoptions: {dataUrl: 'select/get_opt_data?entity=sex'}, formatter: 'sexFmatter'},
        {name: 'description', index: 'description', sortable: false, align: 'right',editable:true, edittype:'textarea', editoptions: {rows: '20', cols: '80'}}
    ],
    pager: '#shengxiao_year_detail_tbl_navigator',
    //rowNum: 10,
    rowList: [], // disable page size dropdown
    pgbuttons: false, // disable page control like next, back button
    pgtext: null, // disable pager text like 'Page 0 of 10'
    viewrecords: false,  // disable current view record text like 'View 1-10 of 100'
    sortname: 'id',
    sortorder: 'asc',
    gridview: true,
    jsonReader: {
        root: 'rows',
        repeatitems : false,
        id: '0'
    },
    caption: '年运程列表',
    editurl: 'admin/year_edit?t=year'
}).navGrid('#shengxiao_year_detail_tbl_navigator', {view: true, del: true}, 
    {
        width: 600,
        closeAfterEdit: true,
        reloadAfterSubmit: false,
        afterSubmit: handleJSONResponseAfterSubmit
    }, //edit options
    {
        width: 600,
        reloadAfterSubmit: false,
        afterSubmit: handleJSONResponseAfterSubmit
    }, //add options
    {
        width: 600
    }, //del options
    {multipleSearch: false}, 
    {closeOnEscape: true}
);

And following is the formatter & unformatter:

$.extend($.fn.fmatter, {
//options: 


sexFmatter: function(cellvalue, options, rowdata){
    return '<div name="'+cellvalue+'">'+ sex_array[cellvalue] +'</div>';
}

});
$.extend($.fn.fmatter.sexFmatter, {
unformat : function(cellvalue, options, cell){
    return $('div', cell).attr('name');
}

});
After selecting one row in grid, and then click the edit button. The sex formater will be 
called while displaying values in the grid, but the values in rowdata has been formatted. 
Is there any one who had the same problem as me before? Any idea on how to solve the problem?
Thanks & Best Regards! Sean Zhang