jqGrid - 在导航器上添加、删除和编辑行答案

【问题标题】：jqGrid - Adding, deleting and editing rows on navigatorjqGrid - 在导航器上添加、删除和编辑行
【发布时间】：2013-11-25 17:22:43
【问题描述】：

当我单击导航器上的图标时，我正在尝试添加/删除/编辑行。例如，如果我单击“添加”按钮，我想显示带有我在 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}); 
}); 

};

【问题讨论】：

标签： jqgrid navigator

【解决方案1】：

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

我建议您另外从colModel 中删除所有index 属性，删除不存在的属性sorttype:"boolean"（请参阅the documentation）。相反，最好将选项 gridview: true 和 autoencode: true 添加到 jqGrid 选项列表中，并考虑将 height: 250 替换为 height: "auto"。

【讨论】：