Jquery Can'；不要让JQgrid 4.5.2冻结列正常工作——只有标题在移动
我已经试着通过阅读其他一些问题来解决这个问题，比如这个=> 但是我认为网格已经改变了，因为我不能调用完整的方法（或者我做错了什么） 所以现在只有一个标题的副本在移动，而不是数据，标题的高度也不正确，但我认为这是因为我旋转了标题，然后在javascript中调整了高度。除了旋转收割台外，这是一个非常开箱即用的方法，但如果没有它，它也无法工作：( 我制作了一个干净的代码示例，这样帮助会更容易一些，在我的情况下，我还使用一些自定义代码来旋转标题，但即使没有它，冻结的列也无法工作 任何帮助都将不胜感激：） HtmlJquery Can'；不要让JQgrid 4.5.2冻结列正常工作——只有标题在移动,jquery,html,css,jqgrid,frozen-columns,Jquery,Html,Css,Jqgrid,Frozen Columns,我已经试着通过阅读其他一些问题来解决这个问题，比如这个=> 但是我认为网格已经改变了，因为我不能调用完整的方法（或者我做错了什么） 所以现在只有一个标题的副本在移动，而不是数据，标题的高度也不正确，但我认为这是因为我旋转了标题，然后在javascript中调整了高度。除了旋转收割台外，这是一个非常开箱即用的方法，但如果没有它，它也无法工作：( 我制作了一个干净的代码示例，这样帮助会更容易一些，在我的情况下，我还使用一些自定义代码来旋转标题，但即使没有它，冻结的列也无法工作 任何帮助都将不胜感激：
<html>
<head>
<title>Jqgridtest</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/jquery-ui/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" type="text/css" />
<link rel="stylesheet" href="styles/demo.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script src="jqgrid/js/i18n/grid.locale-nl.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/generatedata.js"></script>
</head>
<body>
<div>
<table id="jqgrid">
</table>
</div>
</body>
</html>
我建议你加入这一行
$（gridId）.triggerHandler（“jqGridAfterGridComplete”）；
$（gridId）.jqGrid（'setFrozenColumns'）行之后。有关更多信息，请参阅我的错误报告和相应的建议。顺便说一下，主代码jqGrid中已经有了相应的post 4.5.2补丁（请参阅）。所以这个问题应该在jqGrid的下一个版本中解决
代码的附加说明：请不要在循环中使用addRowData
来填充具有datatype:“local”
的网格。相反，您可以为data
数组的每一项设置额外的id
属性，并使用jqGrid的data:data
选项。它允许您使用数据创建jqGrid。如果您使用gridview:true
选项，那么这种网格填充将更加有效。有关详细信息，请参阅。谢谢，现在已冻结：）。您能不能给我一些建议，让哪个元素设置正确的高度，使标题与我调整的其他标题对齐？（当我试图调整元素的高度时，我总是得到滚动条，更改父元素的高度也没有帮助）。+将使用gridview填充，感谢您指出这一点out@Martijn：不客气！看和看。我希望它能解决你关于冻结收割台高度的问题。好的，太好了！标题现在已就位，但filtertoolbar正在消失。有什么快速的解决方法吗？
$(document).ready(function() {
processDataToGrid('#jqgrid') ;
});
function getInternetExplorerVersion()
// Returns the version of Windows Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
var fixPositionsOfFrozenDivs = function () {
var $rows;
if (typeof this.grid.fbDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (typeof this.grid.fhDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
function processDataToGrid(gridId) {
var data = [
{id:1, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:2, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:3, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : false, x15:true } ,
{id:4, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:5, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: true, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:6, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:false, x13: false, x14 : false, x15:true } ,
{id:7, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:8, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:9, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:10, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:11, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:12, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: true, x14 : false, x15:true } ,
{id:13, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:14, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:15, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true } ,
{id:16, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } ,
{id:17, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:18, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:19, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:20, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:21, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:22, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true } ,
{id:23, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } ,
{id:24, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:25, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:26, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:27, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:28, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:29, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } ,
{id:30, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:31, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:32, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:33, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:34, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:35, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:36, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
{id:37, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:38, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:39, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:40, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : true, x15:true } ,
{id:41, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } ,
{id:42, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } ,
];
$(gridId).jqGrid({
datatype: "local",
gridview: true,
forcefit: false,
data:data,
shrinkToFit: false,
width: 780,
height: 400,
rowNum: 100,
columnsheight: 150,
colNames: ['Fixed1', 'Fixed2' ,'Col1', 'Col2', 'Col3' , 'Col4', 'Col5','Col6', 'col7', 'Col8', 'Col9', 'Col10', 'Col11', 'Col12', 'Col13', 'Col4', 'Col15' ],
ignoreCase: true,
colModel: [
{ name: 'fixed1', sorttype: 'text', search:true, width:300, align: 'left', frozen : true ,sortable:false },
{ name: 'fixed2', sorttype: 'text', search: true, width: 130, align: 'left', frozen: true, sortable: false },
{ name: 'x1', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x2', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x3', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x4', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x5', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x6', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x7', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x8', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x9', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x10', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x11', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x12', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x13', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x14', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
{ name: 'x15', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
]
});
//enable group headers
$(gridId).jqGrid('setGroupHeaders', {
groupHeaders: [
{ startColumnName: 'x1', numberOfColumns: 10, titleText: 'TopHeader1' },
{ startColumnName: 'x10', numberOfColumns: 3, titleText: 'TopHeader2' },
{ startColumnName: 'x13', numberOfColumns: 1, titleText: 'TopHeader3' }
]
});
$(gridId).jqGrid('setGroupHeaders', {
groupHeaders: [
{ startColumnName: 'x1', numberOfColumns: 7, titleText: 'SubHeader1' },
{ startColumnName: 'x8', numberOfColumns: 2, titleText: '' },
{ startColumnName: 'x10', numberOfColumns: 6, titleText: 'Subheader2' },
]
});
$(gridId).jqGrid('setFrozenColumns');
RotateColumnHeaders($(gridId), 150, 100);
//enable search and contains searchmethod
$(gridId).jqGrid('filterToolbar', { searchOnEnter: false, defaultSearch: 'cn' });
$(gridId).triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($(gridId)[0]);
}
// Rotates the (x1-x24) columnheaders 90 degrees
var RotateColumnHeaders = function (grid, headerHeight, headerWidth) {
var trHead = $("thead:first tr")[3];
var cm = grid.getGridParam("colModel");
$("th", trHead).height(headerHeight);
for (var iCol = 0; iCol < cm.length; iCol++) {
var cmi = cm[iCol];
//check if name starts with x because our modelnames that should be rotated start with x as well
if (cmi.name.match("^x")) {
var headDiv = $("th:eq(" + iCol + ") div", trHead);
headDiv.addClass("VerticalHeader");
headDiv.css("overflow", "initial");
var ieVersion = getInternetExplorerVersion();
if (ieVersion != -1 && ieVersion <= 9) {
headDiv.addClass("VerticalHeaderIE");
//set height to prevent text clipping
headDiv.height(23);
//set background color of parent since background color of child element has been set so the text is readable
//and the parent color is different = very ugly so set parent color
headDiv.parent().css("background", "#EDEDED");
}
}
}
};
function boolFormatter(cellvalue, options, rowObject) {
if (cellvalue == "*") {
return '<span class="BoolCell Talks">*</span>'; /* null*/
}
else if (cellvalue) {
return '<span class="BoolCell Allowed">●</span>'; /* true */
}
else {
return '<span class="BoolCell NotAllowed">-</span>'; /* false */
}
return new_format_value
}
.VerticalHeader
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
margin-top:-40px;
position: relative;
font-size: 0.8em;
}
.VerticalHeaderIE /* _EXTRA_ style voor VerticalHeader in IE */
{
text-align:left;
width:150px;
height:50px;
margin-top:-40px;
margin-left: 20px;
background-color: #EDEDED;
zoom: 1;
}