内联编辑行

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 分配给colModel 数组中具有key: true 选项的列的索引。在您的情况下，我认为 jqGrid 将使用带有key: true 的最后一个 列。因此'ac_n_circ' 列中的值将用作 id。

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

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

此外，您还可以减少和简化代码。 colModel 的元素属性的默认值在the documentation 中描述（参见表中的“默认”列）。例如，width、align、editable 的默认值为 150、“左”和假。您在所有列中都使用align:'right', editable:true，并且您最常使用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 仅包含 colModel 的 name 属性的值，则可以跳过它。