0

I have a c# asp.net application that uses a Listview control to render a wide table (many columns).

To make this problem a little more generic, the Listview simply renders an HTML table, and is incidental to the problem.

I want to use jqGrid's "tableToGrid" function to freeze the headers and handle vertical and horizontal scrolling, and preferably freeze the 1st column of the resulting HTML table. The frozen headers and scrolling are working, but after considerable research, I don't seem to be able to "put the pieces together" to freeze the column.

I don't want to have to expicitly create colNames and colModel for all the columns in my table unless necessary, since this is handled by the tableToGrid function, so I used an example of changing a frozen column and came up with this javascript: 

tableToGrid($('#parcelTable'),
{
 sortable: false,
 multiselect: false,
 shrinkToFit: false,
 width: 952,
 height: 300
})
.jqGrid('destroyFrozenColumns')
.jqGrid("setColProp", "rowEdit", { frozen: true })
.jqGrid("setFrozenColumns")
.trigger('reloadGrid');

When I tried the above, I got the message Microsoft JScript runtime error: 'undefined' is null or not an object
I also tried not chaining the code for the frozen columns, as in
$('#parcelTable').jq('destroyFrozenColumns');
$('#parcelTable').(jqGrid("setColProp", "rowEdit", { frozen: true }), etc
and got the same message.

I have undoubtedly made some dumb syntax or usage error, but I don't know where to go from here, and don't really know if this is the best approach. Any help appreciated--thanks!

4

1 回答 1

0

要冻结标题，您可以使用：

 $("#gridId").setLabel("Column Index",'Label',"jqgridheaderLocked");

这可以在loadComplete()jqgrid中执行

要冻结列，您只需将类添加到列定义中 

  classes:'jqgridbodyLock'

例如 ：

 {name:"Col1",index:"Col1",width:80,eight:50,sortable:false,classes:'jqgridbodyLock'},

还将以下 css 定义添加到您的公共 css 文件中

.jqgridbodyLock{
    position:relative; 
    left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft);
    z-index: 10;
}

.jqgridheaderLocked{
    position:relative;
    left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
    z-index:30;
}
于 2013-02-25T04:04:29.580 回答