jqGrid - 在导航器上添加,删除和编辑行

时间:2013-11-25 17:22:44

标签: jqgrid navigator

当我点击导航器上的图标时,我正在尝试添加/删除/编辑行。例如,如果我单击“添加”按钮,我想显示包含我在colNames中设置的列的表单,但我不知道如何操作。我已经阅读了wiki http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator,但我找不到如何使用我想要的列指定表单。这是我的代码:

customGrid.js

function criaGrid(){

$("#grid").jqGrid({
    datatype: 'json',
    url: 'dadosGrid.jsp',
    jsonReader: {repeatitems: false, root: 'root'},
    pager: '#paginado',
    rowNum: 10,
    rowList: [10,20,30],
    emptyrecords: "Não há registros.",
    recordtext: "Registros {0} - {1} de {2}",
    loadtext: "Carregando...",
    pgtext: "Página {0} de {1}",
    height: 250,
    colNames:['Código','Nome', 'Ativo', 'Data Inclusão','Login','Email'],
    colModel:[
        {name:'codigo',index:'codigo', width:80, sorttype:"int"},
        {name:'nome',index:'nome', width:120},
        {name:'ativo',index:'ativo', width:80, sorttype:"boolean"},     
        {name:'dataInclusao',index:'dataInclusao', width:120, sorttype:"date", datefmt: 'd-M-Y'},
        {name:'login',index:'login', width:80, sortable:false},      
        {name:'email',index:'email', width:150, sortable:false} 
    ],
    multiselect: true,
    viewrecords: true,
    editurl:"someurl.php",
    caption: "Área"
});


$("#grid").jqGrid('navGrid','#paginado',{id:'edit',id:'add',id:'del',search:false,refresh:false})

$('edit').click(function(){ 
    $("#grid").jqGrid('editGridRow',"new",{height:250,reloadAfterSubmit:true}); 
}); 

};

1 个答案:

答案 0 :(得分:0)

您只需在colModel中为要编辑的列添加editable: true属性即可。需要删除$('edit').click事件句柄,因为navGrid将完成所有工作。

我建议您另外从index删除所有colModel属性,删除不存在的属性sorttype:"boolean"(请参阅the documentation)。而不是将gridview: trueautoencode: true选项添加到jqGrid选项列表中,并考虑将height: 250替换为height: "auto"