Le gel de la colonne dans jqgrid ne fonctionne pas
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freeze.aspx.cs" Inherits="Freeze" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/Lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/Lib/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Scripts/Lib/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="Scripts/Lib/grid.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var lastsel2;
$("#sample").jqGrid({
datatype: "local",
height: 250,
scroll: false,
shrinkToFit: false,
colNames: ['ID Number', 'Name', 'Stock', 'department', 'Notes', 'Service', 'Delivery', 'Result', 'Feedback', 'Total', 'Data', 'Views', 'Rows', 'Columns', 'Table'],
colModel: [
{ name: 'id', index: 'id', width: 90, sorttype: "int", editable: true, frozen: true },
{ name: 'name', index: 'name', width: 150, editable: true,frozen: true, editoptions: { size: "20", maxlength: "30"} },
{ name: 'stock', index: 'stock', width: 60, editable: true,frozen: true, edittype: "select", editoptions: { value: "aw:Yes;bk:No"} },
{ name: 'dep', index: 'dep', width: 90, editable: true,frozen: true, edittype: "select", editoptions: { value: "a:km;b:bc;c:we;i:gg"} },
{ name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} },
{ name: 'Service', index: 'Service', width: 90, sorttype: "int", editable: true },
{ name: 'Delivery', index: 'Delivery', width: 90, sorttype: "int", editable: true },
{ name: 'Result', index: 'Result', width: 90, sorttype: "int", editable: true },
{ name: 'Feedback', index: 'Feedback', width: 90, sorttype: "int", editable: true },
{ name: 'Total', index: 'Total', width: 90, sorttype: "int", editable: true },
{ name: 'Data', index: 'Data', width: 90, sorttype: "int", editable: true },
{ name: 'Views', index: 'Views', width: 90, sorttype: "int", editable: true },
{ name: 'Rows', index: 'Rows', width: 90, sorttype: "int", editable: true},
{ name: 'Columns', index: 'Columns', width: 90, sorttype: "int", editable: true },
{ name: 'Table', index: 'Table', width: 90, sorttype: "int", editable: true }
],
caption: "sample table"
});
var mydata2 = [
{ id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "23456", name: "Laptop", note: "Long text ", stock: "Yes", dep: "bc", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", dep: "we", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "45678", name: "Speakers", note: "note", stock: "No", dep: "gg", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "67890", name: "Play Station", note: "note3", stock: "No", dep: "gg", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "76543", name: "Mobile Telephone", note: "note", stock: "Yes", dep: "we", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "87654", name: "Server", note: "note2", stock: "Yes", dep: "bc", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
{ id: "98765", name: "Matrix Printer", note: "note3", stock: "No", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" }
];
for (var i = 0; i < mydata2.length; i++) {
jQuery("#sample").jqGrid('addRowData', mydata2[i].id, mydata2[i]);
}
});
$("#sample").jqGrid('setFrozenColumns');
$("#sample").trigger('reloadGrid', [{ current: true}]);
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="sample">
</table>
</form>
</body>
</html>
C'est mon code. Je suis à l'aide de jquery version4.4.0 Mais la colonne n'est pas gelé. De bien vouloir m'aider dans ce problème. J'ai essayé de déboguer le code de trop. La méthode "setFrozencolumns" est appelé, mais même si les colonnes ne sont pas gelés,
Vous devez vous connecter pour publier un commentaire.
À utiliser
setFrozenColumns
vous avez besoin de marquer les colonnes qui doivent être gelés par la mise enfrozen:true
dans colModel. Veuillez en lire plus ici:Mise à JOUR
La
setFrozenColumns
méthode est disponible dans jqGrid depuis la version 4.3.0. Vous devez également vous assurer que vous avez vérifié le Personnalisé module dans Base section sur page de téléchargement (ou référencégrid.custom.js
fichier si vous travaillez avec des non compressé de distribution).$("#sample").trigger('reloadGrid', [{current:true}]);
après appel à setFrozenColumns, mais si vous n'avez pas tout casser sur les limitations décrites dans le lien que j'ai donné à vous (et que vous avez vérifié que vous utilisez la bonne version de jqGrid) que tout devrait très bien fonctionner (au moins il n'y a rien de plus qui peut être diagnostiquée à partir de ce que vous avez décrit).essayé de cette façon et il fonctionne bien maintenant..
Assurez-vous que
scroll: false
je.e si vous utilisezscroll: true
de congélation ne fonctionnera pas.