1. Home
  2. jQuery EasyUI Data Grid - Editor Extended

Le meilleur didacticiel jQuery EasyUI Data Grid - Editor Extended en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,

jQuery EasyUI Data Grid - Editor Extended

Certains éditeur commun (éditeur) ajouté à la grille de données (DataGrid), de sorte que les utilisateurs modifient les données. Tout éditeur (éditeur) sont définis dans l'objet de l'$, ce qui peut être étendu pour supporter nouvel éditeur d'héritage (éditeur). Ce tutoriel va vous montrer comment ajouter un nouvel éditeur de numberspinner à la grille de données (DataGrid).

Hérité Editor numberspinner étendu 

	.extend $ ($. Fn.datagrid.defaults.editors, {
		numberspinner: {
			INIT: fonction (conteneur, options) {
				entrée var = $ ( '<input type = "text">') appendTo (conteneur) .;
				retour input.numberspinner (options);
			},
			détruire: function (cible) {
				$ (Target) .numberspinner ( «détruire»);
			},
			getValue: function (cible) {
				return $ (cible) .numberspinner ( 'getValue');
			},
			setValue: function (cible, valeur) {
				$ (Target) .numberspinner ( 'setValue', valeur);
			},
			redimensionner: function (cible, largeur) {
				$ (Target) .numberspinner ( 'resize', largeur);
			}
		}
	});

Création d'une grille de données (DataGrid) en html tag 

	<Table id = style "tt" = "width: 600px; height: 250px"
			url = "data / datagrid_data.json" title = "iconCls éditable DataGrid" = "icon-edit"
			singleSelect = "true" = fitColumns "zone ID itemid" = "true">
		<Thead>
			<Tr>
				<Field Th = "itemid" width = "60"> ID de l'article </ th>
				<Th field = largeur "ListPrice" = "80" = "right" éditeur align = "{type: 'NumberBox' options: {précision: 1}}"> Prix </ th>
				<Field Th = "unitcost" width = "80" align = "right" editor = "numberspinner"> Coût unitaire </ th>
				<Th field = "attr1" width = "180" editor = "text"> Attribut </ th>
				<Th field = "status" width = "60" align = "center" editor = "{type: 'case' options: {sur: 'P', off: ''}}"> Statut </ th>
				<Field Th = "action" width = "80" align = "center" formatter = "action FORMAT"> Action </ th>
			</ Tr>
		</ Thead>
	</ Table>

Nous attribuons éditeur de numberspinner aux «coûts unitaires» champs. Lorsque vous commencez à éditer une ligne, l'utilisateur peut modifier les données par l'éditeur de numberspinner.

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid23.zip

Hot Didacticiel

Nous contacter

jQuery EasyUI Data Grid - Editor Extended
10/30