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 始终为每个id（对于行）分配一些<tr>属性。 HTML不允许在一个HTML页面上复制id。如果对某些列使用key: true，则jqGrid会将内部选项keyIndex分配给colModel数组中具有key: true选项的列的索引。在您的情况下，我认为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。因此，您只应在key: true列中使用ac_n_quad，并且必须从任何其他列（'ac_n_circ'）中删除该属性。

此外，您可以减少和简化代码。 colModel中描述了width元素的属性的默认值（请参阅表中的“默认”列）。例如，align，editable，align:'right', editable:true的默认值为150，“左”和false。您在所有列中都使用width:70，并且最常使用cmTemplate: { align: 'right', editable: true, width:70 }。所以你可以使用

cmTemplate: { align: 'center', editable: true }

而不是您现在使用的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。同样，如果name只包含colModel {{1}}属性的值，则可以跳过{{1}}。

内联编辑行

1 个答案: