Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » FrozenColumns en jQuery

JQuery - FrozenColumns en jQuery

Volver
Nuevo Tema
<<>>
 
Vista:

FrozenColumns en jQuery

Publicado por Diego (1 intervención) el 25/06/2013 15:41:29
Hola, hoy voy a abusar un poco de ustedes pero la verdad me esta enloqueciendo este codigo y no logro dar con el error que tengo.

Basicamente es una grid en jquery en la cual necesito congelar dos columnas y que se despliegen las demas... El problema esta en que siguiendo el ejemplo al pie de la letra no logro encontrar la forma de congelarlas y el codigo me queda "igual" a como esta en la guia

Una ayudita porfa.

Dejo aqui el codigo del script como tal y la pagina de la que me estoy guiando =)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">
 var mydata = [ {producto:"BA",puntos:"1500",naturaleza:"Conecta no navega",estado:"note",concepto:"10.00",CCC:"2111.00",
                 nn1:'',nn2:'',nn3:'',nn4:'',nn5:'',nn6:'',nn7:'',nn8:'',nn9:'',nn10:''} ,
                {producto:"TO",puntos:"750",naturaleza:"No navega",estado:"note",concepto:"10.00",CCC:"2111.00",
                 nn1:'',nn2:'',nn3:'',nn4:'',nn5:'',nn6:'',nn7:'',nn8:'',nn9:'',nn10:''} ,
				{producto:"BA",puntos:"1300",naturaleza:"No navega",estado:"note",concepto:"10.00",CCC:"2111.00",
                 nn:'',nn:'',nn:'',nn:'',nn:'',nn:'',nn:''} ,
				{producto:"TV",puntos:"1000",naturaleza:"xxx",estado:"note",concepto:"10.00",CCC:"2111.00",
                 nn1:'',nn2:'',nn3:'',nn4:'',nn5:'',nn6:'',nn7:'',nn8:'',nn9:'',nn10:''} ,
				{producto:"BA",puntos:"1200",naturaleza:"xxx",estado:"note",concepto:"10.00",CCC:"2111.00",
                 nn1:'',nn2:'',nn3:'',nn4:'',nn5:'',nn6:'',nn7:'',nn8:'',nn9:'',nn10:''}
				];
 
 var myHeader = ['Productos', 'Puntos', 'Naturaleza' ,'Estado del daño' , 'Concepto','CCC','Pedido',
                 'Fecha/hora ingreso daño', 'Fecha/hora cierre daño', 'Fecha del primer daño',
				 'Tiempo total Solución (dias/horas/minutos)', 'Id servicio/ Contrato','Tipo tecnología'];
 
 
$(document).ready(function(){
 
			 $grid = $("#list"),
 
				  $grid.jqGrid({
				  datatype:"clientSide",
				  data: mydata,
				  colNames: myHeader,
				  colModel:[
							  {name:'producto',index: 'producto', width: 70},
							  {name:'puntos',index: 'puntos', width: 100, frozen:true},
							  {name:'naturaleza'},
							  {name:'estado'},
							  {name:'concepto'},
							  {name:'CCC'},
							  {name:'nn1'},
							  {name:'nn1'},
							  {name:'nn1'},
							  {name:'nn2'},
							  {name:'nn3'},
							  {name:'nn4'},
							  {name:'nn5'}
    						],
				  rowNum: 30,
				  width:800,
				  height:'auto',
				  shrinkToFit: false,
				  viewrecords: true,
				  jsonReader: { repeatitems : false },
				  pager: $grid,
				  caption: "Detalle [Vista de Asesor]",
				  grouping:true,
				  groupingView : { groupField : ['producto'],
								   groupColumnShow : [false],
								   groupCollapse : false,
								   groupText : ['<b>{0} - {1} Item(s)</b>']
								 },
				subGrid: true,
				caption: "Daños",
				// define the icons in subgrid 

				subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
				                  "minusicon" : "ui-icon-triangle-1-s",
								  "openicon" : "ui-icon-arrowreturn-1-e",
								  // load the subgrid data only once 

								  // and the just show/hide 

								  "reloadOnExpand" : false,
								  // select the row when the expand column is clicked 

								  "selectOnExpand" : true }
		});
		$grid.jqGrid('setFrozenColumns');});
 
 
</script>
 
</head>
<body>
	<table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>



Me guio de aqui
http://trirand.com/blog/jqgrid/jqgrid.html


De antemano gracias por la ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder