内联编辑行

Question

我现在从jqGrid开始，有些问题我无法理解。我正在做一个内联可编辑的网格，但它只编辑第一行。如果我单击任何一行，它只编辑第一行。我不知道发生了什么，如果有人能告诉我如何一步一步地做，那会对我有很大帮助。

这是我代码的一部分：

$(function(){
    var lastSel;
    $("#list").jqGrid({
    url:'php.php', 
    datatype: 'xml',
    mtype: 'POST', 
    colNames:['ac_n_quad', 'ac_l_circ', 'ac_n_circ', 'ac_fin_g', 'ac_pot', 'ac_volt', 'ac_n_polos', 'ac_t_prot', 'ac_v_prot', 'ac_cabo',
    'ac_fd', 'ac_fp', 'ac_ctr', 'ac_pot_a', 'ac_pot_b', 'ac_pot_c', 'ac_pos_1', 'ac_pos_2', 'ac_calc'], 
    colModel :[ 
      {name:'ac_n_quad', index:'ac_n_quad', width:110, align:'right', editable:true, key:true},
      {name:'ac_l_circ', index:'ac_l_circ', width:65, align:'right', editable:true},
      {name:'ac_n_circ', index:'ac_n_circ', width:120, align:'right', editable:true, key: true},
      {name:'ac_fin_g', index:'ac_fin_g', width:60, align:'right', editable:true},
      {name:'ac_pot', index:'ac_pot', width:55, align:'right', editable:true},
      {name:'ac_volt', index:'ac_volt', width:60, align:'right', editable:true},
      {name:'ac_n_polos', index:'ac_n_polos', width:100, align:'right', editable:true},
      {name:'ac_t_prot', index:'ac_t_prot', width:100, align:'right', editable:true},
      {name:'ac_v_prot', index:'ac_v_prot', width:70, align:'right', editable:true},
      {name:'ac_cabo', index:'ac_cabo', width:60, align:'right', editable:true},
      {name:'ac_fd', index:'ac_fd', width:55, align:'right', editable:true},
      {name:'ac_fp', index:'ac_fp', width:55, align:'right', editable:true},
      {name:'ac_ctr', index:'ac_ctr', width:60, align:'right', editable:true},
      {name:'ac_pot_a', index:'ac_pot_a', width:70, align:'right', editable:true},
      {name:'ac_pot_b', index:'ac_pot_b', width:70, align:'right', editable:true},
      {name:'ac_pot_c', index:'ac_pot_c', width:70, align:'right', editable:true},
      {name:'ac_pos_1', index:'ac_pos_1', width:70, align:'right', editable:true},
      {name:'ac_pos_2', index:'ac_pos_2', width:70, align:'right', editable:true},
      {name:'ac_calc', index:'ac_calc', width:65, align:'right', editable:true}],
    cmTemplate: { align: 'center', editable: true },
    onSelectRow: function(id){
        if(id && id !== lastSel){
            $(this).restoreRow(lastSel);
            lastSel = id;
        }
        $(this).editRow (id, true);
    },
    prmNames: {ac_n_quad: "id"},
    editurl:'clientArray',
    autowidth: 'true', 
    height: 'auto', 
    rowNum: 10, 
    rowList: [10,20,30, 40, 50, 60, 70, 80, 90, 100],
    sortname: 'ac_n_quad, ac_n_circ',
    sortorder: 'asc', 
    pager: '#pager', 
    viewrecords: true,
    gridview: true,  
    caption: 'Table circ_69' 
    });
    jQuery('#list').jqGrid('gridResize');
    jQuery('#list').jqGrid('navGrid', '#pager', {
             edit: true,
             add: true,
             del: true,
             search: false,
             refresh: false
    });
});

Answer 1

您的代码中有许多错误。最重要的是将key: true用于多列。可以看出，您将属性包含在两个列'ac_n_quad'和'ac_n_circ'的定义中。当jqGrid填充网格时，它将<table>用于网格主体，<tr>用于行，<td>用于网格上的单元格。重要的是要理解jqGrid总是为每个<tr>（对于行）分配一些id属性。HTML不允许在一个HTML页面上有id的副本。如果对某列使用key: true，则jqGrid将内部选项keyIndex分配给具有key: true选项的colModel数组中的列的索引。在您的情况下，我认为jqGrid将使用带有key: true的最后一个列。因此，'ac_n_circ'列中的值将用作id。

如果您在'ac_n_circ'列中有重复的值，那么您将有许多不同的非常奇怪的效果（在不同的web浏览器中是不同的）。例如，如果单击一行，则可以选择另一行。在编辑过程中，你也可以有不同的奇怪效果。

因为你使用了prmNames: {ac_n_quad: "id"}（这也是错误的。正确的是prmNames: {id: "ac_n_quad"}），所以我可以怀疑ac_n_quad是真正的唯一id。所以你应该只在ac_n_quad列中使用key: true，并且你必须从任何其他列中删除该属性（'ac_n_circ'）。

此外，您还可以减少和简化代码。文档中描述了colModel元素属性的默认值（请参阅表中的"默认"列）。例如，width、align和editable的默认值分别为150、"left"和false。您在所有列中都使用align:'right', editable:true，并且使用width:70的频率最高。所以你可以使用

cmTemplate: { align: 'right', editable: true, width:70 }

而不是您现在使用的CCD_ 29。它允许您将colModel降低为

colModel: [
    {name:'ac_n_quad', width:110, key:true},
    {name:'ac_l_circ', width:65},
    {name:'ac_n_circ', width:120},
    {name:'ac_fin_g', width:60},
    {name:'ac_pot', width:55},
    {name:'ac_volt', width:60},
    {name:'ac_n_polos', width:100},
    {name:'ac_t_prot', width:100},
    {name:'ac_v_prot'},
    {name:'ac_cabo', width:60},
    {name:'ac_fd', width:55},
    {name:'ac_fp', width:55},
    {name:'ac_ctr', width:60},
    {name:'ac_pot_a'},
    {name:'ac_pot_b'},
    {name:'ac_pot_c'},
    {name:'ac_pos_1'},
    {name:'ac_pos_2'},
    {name:'ac_calc', width:65}
]

如果index的值与name的值相同，则可以跳过index。同样，如果colNames仅包含colModel的name属性的值，则可以跳过它。