无法在子网格中选择行：Jqgrid

Question

我用的是jqgrid，里面加了一个子网格，如下图，

如您所见，
具有 11 和 13 列的行是主网格行

每一行都有感兴趣的子网格， 添加记录元素显示子网格的添加弹出窗口

这是子网格的代码，

subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                url:"shops?q=2&ShopID="+row_id,
                datatype: "xml",
                colNames: ['Interest'],
                colModel: [
                    //{name:"Id",index:"ShopID",width:80,editable:false,editoptions:{readonly:false,size:40}}, //Shop ID not required
                    {name:"id",index:"id",editable:true,edittype:"select",editoptions:{dataUrl:'shops?q=3&ShopID='+row_id},editrules:{required:true}}
                ],
                rowNum:10,
                pager: pager_id,
                width: '100%',
                height: '100%',
                scrollOffset: 0,
                sortname: 'num',
                sortorder: "asc",
                height: '100%',
                editurl:'shops?q=5&ShopID='+row_id
            });
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:true})
        },
        subGridRowColapsed: function(subgrid_id, row_id) {
            // this function is called before removing the data
            //var subgrid_table_id;
            //subgrid_table_id = subgrid_id+"_t";
            //jQuery("#"+subgrid_table_id).remove();
        }

问题是，当子网格中有多个元素时，我可以选择它（我使用最新版本的 Chrome）但是当子网格中只有单个元素时，我可以选择它（如果你注意到颜色差异，请请参阅子网格元素“礼物” - 在第 13 行下方选择），一旦选择“礼物”就可以删除。

更新： 在 Firefox 和 IE 中，仅从子网格中选择第一行

代码有问题吗？为什么子网格中有多个元素时我不能选择单个元素？

感谢您的宝贵时间，谢谢

Answer 1

我想你有 id 重复的问题。 HTML 不允许在具有相同值的相同 HTML 页面上使用 id 属性。所有id 属性的值必须是唯一的。我建议您使用 Chrome/IE 的开发者工具或使用 Firebug 来验证您是否有问题。您只需检查网格和子网格的<tr> 元素上的id 属性。

另一方面，jqGrid 的所有行（所有<tr> 元素）成为分配的id 属性。通常你必须在url 的响应中在服务器端填写id。问题是一个人通常使用来自数据库的id 的值，但您通常只有唯一的id 在数据库的一个表上，而不是在数据库上的所有表上。因此，您可以轻松地遇到多个 jqGrid（或带有 subrird 的网格）获取 id 重复的行的场景。

解决问题最简单的方法是使用idPrefix 选项，该选项是在my suggestion 之后在jqGrid 中引入的。主要优点是您可以继续使用数据库中的 原始 id 值并在 jqGrid 中使用 id 属性，这将是唯一的，因为从 @987654338 构建 id 属性@ 从服务器返回的值，但使用了前缀。在the answer。所以我建议您对所有子网格使用不同的idPrefixes。例如，您可以在子网格中使用idPrefix: 's' + row_id + '_'（参见the answer 和this one）。