jqgrid双头

时间:2011-01-07 17:35:51

标签: 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);   
            }


        });

感谢。

2 个答案:

答案 0 :(得分:1)

关于你的第二个问题。我认为你对所有网格行使用相同的id。行id必须是唯一的,那么你就不会有这个问题。

关于两个标题我真的不明白你的意思。可以说你可以解释你的意思或者张贴图片。

答案 1 :(得分:0)

您可以考虑为每个日期范围使用单独的网格,并将它们格式化为看起来像是在一起。

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

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

您可能还想查看“高级”下的subgrid demos here,看看是否有适用于您的数据的内容。


<强>替代

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

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