jqgrid双标题答案

【问题标题】：jqgrid double headersjqgrid双标题
【发布时间】：2011-01-07 17:35:50
【问题描述】：

我们可以在 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个标题行吗？还是一个 2 行高的标题行？
@Zac。两个标题行。一个标题包含所有必需的列。我需要将第二个标题放在第一个标题之上，以包含某些列的日期范围。

标签： jquery jqgrid

【解决方案1】：

关于你的第二个问题。我假设您对所有网格行使用相同的 id。行 id 必须是唯一的，那么您将不会遇到描述的问题。

关于两个标题我不太明白你的意思。大概你可以用其他语言解释你的意思或张贴图片。

【讨论】：

@Oleg。是的，我看到所有行都具有相同的 ID。我以为 jqgrid 会自动分配一个不同的 id。如何确保行具有唯一 ID？
@user508518：这取决于 yoi 如何用数据填充 jqGrid。如果您发布相应的代码示例（只需附加您的问题），那么我可以更好地解释该示例。
@user508518：我回来了。在您发布的代码中错过了最有趣的信息：colModel 和 colNames 的定义。顺便说一句，如果colModel 定义了label，你就不能使用colNames。此外，您应该发布从服务器发布的网格的 JSON 数据。您可以使用 Fiddler（参见 fiddler2.com/fiddler2）或 Firebug（参见 getfirebug.com）来获取纯 JSON 数据。 JSON 数据中的 id 是您遇到问题的地方。对应于 jqGrid 定义，服务器应为第一列返回必须是唯一 id 值的数据
@Oleg：我在动态构建列时在服务器端定义 colModel 和 colNames。 JSON 数据太大，无法在此处发布。但是我明白你在说什么，我们在jsonReader中提到的那个id值应该是一个唯一的列值？我在服务器端获取的数据现在没有任何这样的列。所以现在我的 id 值为 0，它假定第一列，所以我把它设为空，它工作正常。我也可以更改点击事件的背景颜色吗？
@user508518: 如果您使用id: "0" 和cell: ""，则对应于从服务器回传的网格行的数据是字符串数组，第一个字符串（索引 0）是值用作 id。将要构建的<table> 的<tr> 元素将具有值。对应于 HTML 或 XHTML 规范，您在id 属性中不能使用重复项。此外，我强烈建议您使用服务器端数据分页。它使 jqGrid 更快，并与工具栏搜索或其他搜索一起改善了用户体验。

【解决方案2】：

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

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

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

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

替代方案

阅读完您的 cmets 后，我认为这可能更接近您想要的，只需更改日期范围的单位即可。

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

【讨论】：