jQuery EasyUI Data Grid - Set Figer les colonnes

Cet exemple montre comment geler certaines des colonnes lorsque l'utilisateur déplace la barre de défilement horizontale sur la grille, les colonnes congelés ne peuvent pas faire défiler à la vue extérieure.

Pour figer une colonne, vous devez définir la propriété frozenColumns. frozenColumn propriétés et attributs sous forme de colonnes.

	$ ( '# Tt'). Datagrid ({
		titre: «Colonnes congelés»,
		iconCls: «icon-save ',
		largeur: 500,
		hauteur: 250,
		url: 'data / datagrid_data.json',
		frozenColumns: [[
			{Champ: 'itemid', titre: «ID d'objet, largeur: 80},
			{Champ: 'ProductID', titre: 'ID', largeur: 80},
		]],
		colonnes: [[
			{Champ: 'Prix officiel', titre: 'Prix', largeur: 80, align: «droit»},
			{Champ: 'unitcost', titre: «Coût unitaire», largeur: 80, align: «droit»},
			{Champ: 'attr1', titre: «Attribut, largeur: 100},
			{Champ: «statut», le titre: 'Status', largeur: 60}
		]]
	});

Vous ne devez pas écrire de code javascript, de sorte que vous pouvez créer une grille de données (DataGrid) composants comme suit:

	<Table id = "tt" title = "Colonnes congelés" class = le style "easyui-datagrid" = "width: 500px; height: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icon-save">
		<Thead congelé = "true">
			<Tr>
				<Field Th = "itemid" width = "80"> ID de l'article </ th>
				<Field Th = "ProductID" width = "80"> ID de produit </ th>
			</ Tr>
		</ Thead>
		<Thead>
			<Tr>
				<Th field = largeur "ListPrice" = "80" align = "right"> Prix </ th>
				<Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th>
				<Field Th = largeur "de attr1" = "150"> Attribut </ th>
				<Field Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid5.zip