Jquery jqgrid双标题

我们可以在jqgrid中包含两个标题吗。一个有colModel，一个没有colModel

我还有一个问题，当我单击一行时，整个网格会高亮显示。我如何解决这个问题

CSS代码：

.cssclass{

            background-color : #EEEEEE;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #0B0B61;
            border: 0;
            font-weight: bold;
            text-align: center;
            text-indent: 2pt;
            padding-top: 2px;
            padding-right: 2px;
            padding-left: 2px;
            left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft);
            position:relative;
            z-index:10;
            cursor: default;
    }

jqgrid代码：

        $.ajax({

            type: "POST",
            url: 'cfcs/index.cfc?method=getCols',
            data: "",
            dataType: "json",
            success: function(result)
            {

                colM = eval("([" + result.COLMODEL + "])");
                colN = result.COLNAMES;


                jQuery("#list").jqGrid({

                    url:'cfcs/index.cfc?method=getDetails',
                    datatype: 'json',
                    mtype: 'POST',

                    colNames:colN,
                    colModel :colM,
                    height: 'auto',
                    hoverrows: true,
                    width: 1260,
                    shrinkToFit: false,
                    pager: jQuery('#pager'),
                    resizable: false,
                    rowNum: 25,
                    rowList: [25, 50, 100],
                    viewrecords: true,
                    jsonReader: {
                        root: "ROWS", //our data
                        page: "PAGE", //current page
                        total: "TOTAL", //total pages
                        records:"RECORDS", //total records
                        cell: "",
                        id: "0"
                    }
                    //loadComplete: function(data){alert('loaded');},
                    //loadError: function(xhr,status,error){alert('error');}
                }) 
                $("#list").setLabel("col1","<br><br>col1","cssclass");
                $("#list").setLabel("col2","<br><br>col1","cssClass");

                $("#list").jqGrid('navGrid','#pager',{
                    edit:false,
                    add:false,
                    del:false, 
                    search:true,
                    refresh: true,
                    searchtext:"Search",
                    refreshtext: "Refresh",
                    'cloneToTop':true
                }); 
            },
            error: function(x, e)
            {
                alert(x.readyState + " "+ x.status +" "+ e.msg);   
            }


        });

$.ajax({
类型：“POST”，
url:'cfcs/index.cfc？method=getCols'，
数据：“，
数据类型：“json”，
成功：功能（结果）
{
colM=eval（（[“+result.COLMODEL+”]）；
colN=result.COLNAMES；
jQuery（“#list”）.jqGrid({
url:'cfcs/index.cfc？method=getDetails'，
数据类型：“json”，
mtype:“POST”，
姓名：colN，
科尔姆，
高度：“自动”，
没错，
宽度：1260，
shrinkToFit：错，
pager:jQuery（“#pager”），
可调整大小：false，
行数：25，
行列表：[25,50,100]，
viewrecords：是的，
jsonReader：{
root:“行”//我们的数据
页面：“页面”，//当前页面
总计：“总计”，//总页数
记录：“记录”，//记录总数
单元格：“”，
id:“0”
}
//loadComplete:函数（数据）{alert（'loaded'）；}，
//loadError:function（xhr，status，error）{alert（'error'）；}
}) 
$（“#列表”）.setLabel（“col1”、“col1”、“cssclass”）；
$（“#列表”）.setLabel（“col2”、“col1”、“cssClass”）；
$（“#list”）.jqGrid（'navGrid'，'#pager'{
编辑：false，
加:错,，
戴尔：错，
搜索：对，
刷新：是的，
searchtext:“搜索”，
刷新文本：“刷新”，
“cloneToTop”：对
}); 
},
错误：函数（x，e）
{
警报（x.readyState+“”+x.status+“”+e.msg）；
}
});

---

谢谢。

关于你的第二个问题。我建议您对所有网格行使用相同的id。行id必须是唯一的，这样就不会出现描述的问题

---

关于两个标题我真的不明白你的意思。你可以用其他的方式来解释你的意思，或者张贴图片。

你可以考虑为每个日期范围使用单独的网格，只需将它们格式化为看起来它们在一起。

---------------------------------------------------
|         1/1/2010     |           1/2/2010       |
---------------------------------------------------
|  grid 1 header       | grid 2 header            |
---------------------------------------------------

您可以将grid1和grid2的各种事件绑定在一起，因此在grid1中选择第10行也会在grid2中选择它

您可能还想查看“高级”下的内容，看看是否有适合您的数据的内容

---

备选方案

在阅读了你的评论后，我认为这可能更接近你想要的，只需更改日期范围的单位。

---

你是说两行标题？还是一个两行高的标题行？@Zac。两个标题行。一个标题包含所有必需的列。我需要将第二个标题放在第一个标题的顶部，以包含某些列的日期范围。@Oleg。是的，我看到所有行都有相同的id。我以为jqgrid会自动分配不同的id。我如何确保这些行有唯一的id？@user508518：这取决于您如何用数据填充jqgrid。如果您发布了相应的代码示例（只需附加您的问题），那么我可以更好地解释示例中的所有内容。@user508518:我回来了。在您发布的代码中，缺少了最有趣的信息：

colModel

和

colNames

的定义。顺便说一下，如果

colModel

定义了

label

，则不能使用

colNames

。此外，您应该发布从服务器发布的网格JSON数据。您可以使用Fiddler（请参阅）或Firebug（请参阅）获取纯JSON数据。JSON数据中的ID就是问题所在。与jqGrid定义相对应，服务器应为第一列返回必须是唯一id的数据value@Oleg：在动态构建列时，我在服务器端定义colModel和colNames。JSON数据太大，无法在此处发布。但我理解您的意思，我们在jsonReader中提到的id值应该是唯一的列值？我现在在服务器端获取的数据没有任何这样的列。因此，现在我的id值为0，它假定第一列，因此我将其设置为空，并且工作正常。我还可以更改单击事件的背景色吗？@user508518:如果使用

id:“0”

和

单元格：“

，则与从服务器发回的网格行相对应的数据是字符串数组和第一个字符串（索引0）是用作id的值。

将生成的

元素将具有这些值。对应于HTML或XHTML规范，您不能在

id

属性中使用重复项。此外，我严格建议您使用服务器端数据分页。它使jqGrid更加快速，并与工具栏搜索或其他搜索一起改善用户体验。

.ui-jqgrid .ui-jqgrid-htable th div 
{ 
   height: auto; 
   padding: 5px 0px;
}