Kit de Développement Logiciel Open Source

Applicable uniquement à l'élément DIV.zdk-action-bar.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<!-- Here are declared the buttons and others elements of the action bar -->
			</div>

Applicable uniquement à l'élément DIV.zdk-action-bar.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-dialog="mydialogid">
				<!-- Here are declared the buttons and others elements of the action bar -->
			</div>

Applicable uniquement aux éléments BUTTON.zdk-bt-edit et BUTTON.zdk-bt-remove.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid"
					data-zdk-dialog="mydialogid">
				<button class="zdk-bt-edit"
						data-zdk-noselection="Select the row to edit!">Edit</button>
				<button class="zdk-bt-remove"
						data-zdk-noselection="Select the row to remove!">Remove</button>
			</div>

Applicable uniquement à l'élément BUTTON.zdk-bt-remove.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<button class="zdk-bt-remove"
						data-zdk-confirm="Do you want to remove the row?:Yes:No">Remove</button>
			</div>

Applicable uniquement aux éléments BUTTON.zdk-bt-remove et INPUT.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<button class="zdk-bt-remove"
						data-zdk-action="mycontroller:remove">Remove</button>
				<div class="zdk-filter-rows">
					<input title="keyword..." data-zdk-action="mycontroller:suggestions">
					<button class="zdk-bt-clear"></button>
					<button class="zdk-bt-search"></button>
				</div>
			</div>

Applicable uniquement à l'élément BUTTON.zdk-bt-search.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<div class="zdk-filter-rows">
					<input title="keyword..." data-zdk-action="mycontroller:suggestions">
					<button class="zdk-bt-clear"></button>
					<button class="zdk-bt-search" data-zdk-novalue="Please, enter a keyword!">
					</button>
				</div>
			</div>

Applicable uniquement à l'élément INPUT déclaré sous l'élément DIV.zdk-filter-rows.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<div class="zdk-filter-rows">
					<input title="keyword..." data-zdk-action="mycontroller:suggestions"
						data-zdk-delay="400">
					<button class="zdk-bt-clear"></button>
					<button class="zdk-bt-search">
					</button>
				</div>
			</div>

Depuis la version 1.4 de ZnetDK, le nombre de lignes sélectionnées est mémorisé en local sur l'ordinateur depuis lequel s'exécute l'application (stockage local HTML5). Lors des accès suivants à la vue contenant la barre d'action (après fermeture par exemple du navigateur), le dernier nombre de lignes qui a été mémorisé est restauré et le tableau de données est affiché en tenant compte de ce nombre de lignes.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<select class="zdk-select-rows" title="Rows">
					<option value="10">10</option>
					<option value="20">20</option>
					<option value="100">All</option>
				</select>
			</div>

L'attribut HTML5 data-zdk-action doit être renseigné pour le champ de saisie HTML INPUT, afin d'afficher les suggestions de critères retournées par l'action et le contrôleur PHP développé à cet effet.

La classe de style zdk-bt-clear définie pour le bouton HTML BUTTON, permet à la barre d'action lors du clic du bouton, de réinitialiser le contenu du tableau zdkdatatable lié au composant.

La classe de style zdk-bt-search appliquée quant à elle au bouton HTML BUTTON, permet à la barre d'action lors du clic du bouton, d'appliquer le critère de filtre au contenu du tableau zdkdatatable lié au composant.

Exemple d'appel :

			<div class="zdk-action-bar" data-zdk-datatable="mydatatableid">
				<div class="zdk-filter-rows">
					<input title="search criteria..." data-zdk-action="mycontroller:myaction">
					<button class="zdk-bt-clear"></button>
					<button class="zdk-bt-search" data-zdk-novalue="Value required!"></button>
				</div>
			</div>

En effet, si cette classe n'est pas renseignée, ZnetDK considère par défaut, que l'identifiant technique de la ligne à supprimer se nomme id.

Or, si l'identifiant technique se nomme autrement comme par exemple client_id, alors ZnetDK peut en avoir connaissance grâce à l'indication de la classe zdk-row-id pour le champ de formulaire correspondant (nommé via l'attribut HTML name).
Ainsi à la suppression d'un enregistrement, la variable POST nommée client_id est transmise à l'action de contrôleur idoine, avec comme valeur celle de l'identifiant technique de la ligne sélectionnée dans le Datatable.

Exemple d'appel :

			<!-- Action bar -->
			<div class="zdk-action-bar" data-zdk-datatable="mydatatable"
					data-zdk-dialog="mydialog">
				<button class="zdk-bt-remove"
					data-zdk-action="mycontroller:remove">Remove</button>
			</div>
			<!-- Datatable -->
			<div id="mydatatable" class="zdk-datatable" title="Products"
				data-zdk-action="mycontroller:data">
				<!-- ... -->
				<!-- ... -->
			</div>
			<!-- Form dialog -->
			<div id="mydialog" class="zdk-modal" title="Product">
				<form class='zdk-form' data-zdk-action="mycontroller:save"
					data-zdk-datatable="mydatatable">
					<label>Part number</label>
					<input name="part_number" required>
					<label>Product name</label>
					<input name="name" required>
					<label>Price</label>
					<input name="price" required>
					<input class="zdk-row-id" name="product_id" type="hidden">
					<button class="zdk-bt-save zdk-close-dialog" type="submit">Save</button>
					<button class="zdk-bt-cancel zdk-close-dialog" type="button">Cancel</button>
				</form>
			</div>

Exemple d'appel :

			$("#myactionbar").zdkactionbar({
				rowremoved: function() {
					alert('Rowremoved event catched! The datatable row is not removed.');
				}
			});

L'interception de cet évènement peut être utile pour surcharger le comportement standard de recherche.
Le gestionnaire d'évènement prenant en charge cet évènement retournera la valeur false pour indiquer à la barre d'action, que la recherche est réalisée en dehors du composant.

Exemple d'appel :

			$("#myactionbar").zdkactionbar({
				search: function() {
					alert('Search event catched! The datatable is not filtered.');
					return false;
				}
			});

Exemple d'appel :

			$("#myactionbar").zdkactionbar({
				whenadd: function() {
					alert('The Add form is not yet displayed!');
				}
			});

Exemple d'appel :

			$("#myactionbar").zdkactionbar({
				whenedit: function() {
					alert('The Edit form is not yet displayed!');
				}
			});

Exemple d'appel :

			$("#myactionbar").zdkactionbar({
				whenremove: function() {
					$(this).zdkactionbar('option','getRemoveConfirm', function(toCallback,
                        rowID, identifierName, dialogTitle) {
						var $this = this, identifier = {};
						identifier[identifierName] = rowID;
						znetdk.request({
							control:'mycontroller',
							action:'confirmation',
							data:identifier,
							callback: function(response) {
								znetdk.getUserConfirmation({
									title: dialogTitle,
									message: response.question,
									yesLabel: response.yes_label,
									noLabel: response.no_label,
									callback: function (confirmation) {
										if (confirmation) {
											toCallback.call($this,rowID,identifierName);
										}
									}
								});
							}
						});
					});
				}
			});

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-action="mycontroller:myaction">
			</div>

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-cols-resize="true">
			</div>

Depuis la version 1.3 de ZnetDK, la propriété tooltip peut être renseignée à la valeur true dans la définition d'une colonne pour afficher dans une infobulle le texte de ses cellules.
Ainsi, lorsque un texte trop long dans une cellule du tableau est tronqué à l'affichage, son survol avec le pointeur de la souris l'affiche intégralement dans une infobulle.

Depuis la version 1.6 de ZnetDK, la propriété icon peut être ajoutée à la définition d'une colonne pour afficher une icône jQueryUI ou FontAwesome. Au clic de cette icône, l'événement iconclick est lancé avec en paramètre la valeur contenue dans la colonne spécifiée à l'aide de la propriété fieldValueTriggered.

Depuis la version 2.5 de ZnetDK, la propriété isHtml peut être renseignée à la valeur true pour indiquer que le contenu de la colonne est du code HTML et qu'il doit être interprété pour l'affichage.

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-columns='[
				{"field":"id", "headerText": "Numéro"}
                {"field":"nom", "headerText": "Nom", "icon": "fa-vcard", "fieldValueTriggered": "id"},
                {"field":"adresse", "headerText": "Adresse", "tooltip": true},
                {"field":"code_postal", "headerText": "Code postal"},
                {"field":"ville", "headerText": "Ville"}]'>
			</div>

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-multiselect="true">
			</div>

• le nombre de lignes à afficher par page (obligatoire).
  Ce nombre correspond à l'option rows du composant Paginator.
• le nombre de boutons de pagination affichés dans la barre de pagination (5 par défaut si non renseigné). Il correspond à l'option pageLinks du composant Paginator.

Ces deux nombres sont séparés par un caractère : (deux points).

Exemple 1 : data-zdk-paginator="10" affiche 10 lignes par page et 5 boutons pour paginer.

Exemple 2 : data-zdk-paginator="50:10" affiche 50 lignes par page et 10 boutons pour paginer.

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-paginator="10:3">
			</div>

Exemple d'appel :

			<div class="zdk-datatable" data-zdk-resetsortlabel="<?php echo LC_BTN_RESET_SORT; ?>">
			</div>

Exemple d'appel :

			$('#mytable').zdkdatatable('empty');

La valeur du filtre est transmise dans la requête AJAX adressée au contrôleur dans le paramètre POST search_criteria.

Le contrôleur applicatif retourne alors en réponse les seules lignes de données qui contiennent la valeur de filtrage.

Exemple d'appel :

			var filterValue = 'mon texte';
			$('#mytable').zdkdatatable('filterRows',filterValue);

Exemple d'appel :

                    var selectedrow = $('#mytable').zdkdatatable('getSelection'),
                        rowData = $('#mytable').zdkdatatable('getRowData', selectedrow[0]);
                    alert(rowData.customer_name);

Exemple d'appel :

			$('#mytable').zdkdatatable('refresh');

Exemple d'appel :

			$('#mytable').zdkdatatable('selectRowByValue', 'CustomerNbr', 'C434452');

Exemple d'appel :

$("#mydatatable").zdkdatatable({
    dataloaded: function() {
        alert('Rows loaded successfully from the PHP controller action.');
    }
});

Exemple de réponse JSON :

{"total":4,
"rows":[
	{"product_id":"4","product_name":"Air cooling",
			"product_description":"Air filter for Jaguar vehicles"},
	{"product_id":"2","product_name":"Oil filter",
			"product_description":"Oil filter for petrol engines"},
	{"product_id":"7","product_name":"Spark plug",
			"product_description":"Spark plug NGK"},
	{"product_id":"1","product_name":"Radiator fan",
			"product_description":"Fan for vehicles without air conditioning"}
	],
"success":true}

Exemple d'appel :

			<form class="zdk-form" data-zdk-action="mycontroller:myaction">
				<!-- Here are declared the Form elements -->
			</form>

Exemple d'appel :

			<form class="zdk-form" data-zdk-action="mycontroller:myaction" data-zdk-allvalues="true">
				<!-- Here are declared the Form elements -->
			</form>

Exemple d'appel :

<form class="zdk-form" data-zdk-datatable="mydatableid">
    <!-- Here are declared the Form elements -->
    <input class="zdk-row-id" type="hidden" name="client_id">
</form>

Exemple d'appel :

			<form class="zdk-form" data-zdkerrmsg-required="Please, fill in this field!">
				<!-- Here are declared the Form elements -->
			</form>

Exemple d'appel :

			<form class="zdk-form" novalidate="">
				<!-- Here are declared the Form elements -->
			</form>

Classe de style disponible à partir de la version 2.6 de ZnetDK.

Exemple de définition :

<form class="zdk-form">
	<label>My label</label>
	<textarea class="zdk-form-notrim" name="my_field"></textarea>
</form>

Exemple de définition :

<form class="zdk-form">
	<label class="zdk-required">My label</label>
	<input name="my_field" type="text">
</form>

Les données du formulaire sont préalablement réinitialisée par un appel de la méthode reset.
Les propriétés de l'objet values doivent être nommées à l'identique du nom (attribut HTML name) des éléments du formulaire à initialiser.

Exemple d'appel :

			var personne = {
				nom:"Paul",
				prenom:"Defrance",
				age:26
			};
			$('#myform').zdkform('init',personne);

Exemple d'appel :

			$('#my_close_button').click(function(event) {
				event.preventDefault();
				var dataModified = $("#myform").zdkform('isFormModified');
				if (dataModified) {
					znetdk.getUserConfirmation({
						title: "Form modified...",
						message: 'Do you really want to quit without saving?',
						yesLabel: 'Yes',
						noLabel: 'No',
						callback: function (confirmation) {
							if (confirmation) {
								$('#myDialog').zdkmodal('hide');
							}
						}
					});
				}
			});

Chaque objet comprend les propriétés suivantes :

• name : nom de l'élément de saisie de données (input, select...) indiqué pour l'attribut HTML name.
• value : valeur saisie dans le formulaire pour l'élément HTML.

Le paramètre getEmptyInputs lorsqu'il est renseigné à la valeur true, renvoie également les valeurs des éléments de saisie pour lesquels aucune valeur ou aucune sélection n'a été effectuée.

Exemple d'appel :

			var formData = $('#myform').zdkform('getFormData'),
				message = "Form data:\n";
			for (i = 0; i < formData.length; i++) {
				message += "° " + formData[i].name
						+ " = " + formData[i].value + "\n";
			}
			alert(message);

Exemple d'appel :

			var inputValue = $('#myform').zdkform('getInputValues', 'my_input');
			alert(inputValue[0]);

Le nom du contrôleur et de l'action à adresser côté serveur sont renseignés dans les paramètres controller et action.

Le paramètre idName est le nom du paramètre POST qui est envoyé au contrôleur et idValue sa valeur associée qui identifie de manière unique les données demandées (par exemple l'identifiant technique en base de données d'un client).

Exemple d'appel :

			$('#myform').zdkform('loadData','clientctrl','client','id','78');

Les champs de formulaire sont vidés (y compris les éléments <textarea> et les champs cachés avec l'attribut type="hidden") et la dernière sélection des cases à cocher, des boutons radio, des listes (élément <select>) et des composants zdktree est effacée.

Cette méthode est automatiquement appelée si l'évènement reset est généré au sein du formulaire, par exemple au clic d'un bouton de type reset.

Exemple d'appel :

			$('#myform').zdkform('reset');

Lorsque le paramètre isModified est renseigné à la valeur true, les données du formulaire sont marquées comme étant modifiées. En revanche à la valeur false, les données du formulaire sont marquées comme n'ayant pas été modifiées.

Exemple d'appel :

			$('#myform').zdkform('setFormModified',true);

Exemple d'appel :

			$('#myform').zdkform('setReadOnly',true);

Exemple d'appel :

			var personne = {
				nom:"Paul",
				prenom:"Defrance",
				age:26
			};
			$('#myform').zdkform('setValues',personne);

Exemple d'appel :

                    $('#myform').zdkform('showCustomError','Erreur détectée !', 'my_input');

Dans le cas où le formulaire est branché à un contrôleur d'application (voir les options controller et action), cet évènement n'est alors déclenché que si la réponse HTTP qu'il retourne au format JSON indique que l'action a réussi (voir la méthode ZnetDK Request::setSuccessMessage()).

La réponse renvoyée au format JSON par l'action invoquée du contrôleur peut être lue depuis la fonction déclenchée en réponse de l'évènement (voir exemple ci-dessous).

Exemple d'appel :

			$("#myform").zdkform({
				complete: function (context, response) {
					alert("Form validated successfully.",
					" The value returned is: ", response.myValue);
				}
			});

Cet évènement n'est en revanche pas déclenché si aucun contrôleur d'application n'est renseigné pour le formulaire (voir les options controller et action), mais si la validation des données de formulaire échoue.

Exemple d'appel :

			$("#myform").zdkform({
				failed: function () {
					alert("The execution of the remote action has failed!");
				}
			});

Cet événement peut être intercepté pour définir des gestionnaires d'événements spécifiques aux composants graphiques.

Exemple d'appel :

			$("#myform").zdkform({
				ready: function () {
					alert("The widgets in the form are now instantiated!");
				}
			});

Cet événement peut être intercepté pour définir des gestionnaires d'événements spécifiques aux composants graphiques.

Exemple d'appel :

			$("#myform").zdkform({
				resetdone: function () {
					alert("The widgets in the form are now reset!");
				}
			});

Cet événement peut être intercepté pour compléter les données du formulaire avant qu'elles ne soient validées et transmises en AJAX au contrôleur distant.

Exemple d'appel :

			$("#myform").zdkform({
				beforesubmit: function () {
					alert("The form data are not yet validated and submitted!");
				}
			});

Exemple d'appel :

			<div class="zdk-modal" title="mytitle" data-zdk-width="360px">
				<!-- Content of the dialog... -->
			</div>

Exemple d'appel :

			<div class="zdk-modal" title="mytitle"
				data-zdk-confirm="Do you want to quit?:Yes:No">
				<!-- Content of the dialog... -->
			</div>

Exemple d'appel :

			<div class="zdk-modal" title="mytitle"
				data-icon="fa-home">
				<!-- Content of the dialog... -->
			</div>

Exemple de définition :

			<div class="zdk-modal zdk-modal-maximizable" title="mytitle">
				<!-- Content of the dialog... -->
			</div>

Exemple d'appel :

			<div class="zdk-modal" title="mytitle">
				<form class='zdk-form' data-zdk-action="mycontroller:myaction">
					<label>My label</label>
					<input name="myfield" maxlength="10" required>
					<button class="zdk-bt-save zdk-close-dialog" type="submit">Save</button>
					<button class="zdk-bt-cancel zdk-close-dialog" type="button">Cancel</button>
				</form>
			</div>

Exemple d'appel :

			$("input[name=my_date]").zdkinputdate({regional: znetdk.getCurrentLanguage()});

Exemple d'appel :

			$("input[name=my_date]").zdkinputdate('setCurrentDate');

Exemple d'appel :

			$("input[name=my_date]").zdkinputdate('setW3CDate','2015-06-29');

Exemple d'appel :

			var myW3Cdate = $("input[name=my_date]").zdkinputdate('getW3CDate');

Exemple d'appel :

			var isDateValid = $("input[name=my_date]").zdkinputdate('checkDate');
			if (!isDateValid) {
				alert("The date you've typed in is invalid!");
			}

A l'appel de la méthode de formulaire init, si l'objet JavaScript passé en paramètre contient une propriété de même nom que celui indiqué pour l'attribut data-name, alors sa valeur chaîne avec balises HTML initialise le champ de saisie formaté.

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-inputhtml" data-name="myhtmlinput" data-required="true"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-inputhtml" data-name="myhtmlinput" data-disabled="true"></div>
</form>

Exemple d'appel :

			$("#myinput").zdkinputhtml('setValue', 'My <b>formated</b> text...');

Exemple d'appel :

				var text = $("#myinput").zdkinputhtml('getValue');

Exemple d'appel :

			$("#myinput").zdkinputhtml('empty');

Exemple d'appel :

			var isTextEmpty = $("#myinput").zdkinputhtml('isEmpty');

Exemple d'appel :

			$("#myinput").zdkinputhtml('disable');

Exemple d'appel :

			$("#myinput").zdkinputhtml('enable');

Exemple d'appel :

<form class="zdk-form">
	<select class="zdk-listbox" data-zdk-action="mycontroller:myaction" multiple>
	</select>
</form>

Exemple d'appel :

$("#mylistbox").zdklistbox({
	controller:'mycontroller',
	action:'myaction'
});

Le paramètre optionnel keepSelection lorsqu'il est passé à la méthode avec la valeur true, a pour effet de conserver la sélection courante des éléments de la liste de choix après son rafraîchissement (la propriété HTML multiple doit obligatoirement être définie pour l'élément <SELECT/>).

Exemple d'appel :

			$("#mylistbox").zdklistbox('refresh');

Les valeurs retournées sont celles contenues dans l'attribut value des éléments HTML <OPTION/>.

Exemple d'appel :

			var selectedValues = new Array();
			selectedValues = $("#mylistbox").zdklistbox('getSelectedItemValues');

Si des options disposent de la propriété HTML selected, elles sont sélectionnées par défaut. Autrement, aucune option n'est sélectionnée par défaut.

Exemple d'appel :

			$("#mylistbox").zdklistbox('resetSelection');

Les valeurs attendues dans le tableau passé en paramètre sont celles contenues dans l'attribut value des éléments HTML <OPTION/>.

Exemple d'appel :

			var selectedValues = new Array(4,7,12);
			$("#mylistbox").zdklistbox('selectItemsByValues',selectedValues);

Exemple d'appel :

			$("#mylistbox").zdklistbox({
				dataloaded: function() {
					alert('Data loaded!');
				}
			});

• label : intitulé d'affichage de l'élément dans la liste de choix,
• value : valeur associée à l'élément de la liste de choix.

Exemple de réponse JSON :

{"rows":[
		{"label":"Accounting","value":"4"},
		{"label":"Authorizations","value":"2"},
		{"label":"Marketing","value":"7"},
		{"label":"Read only","value":"10"}
], "success":true}

Exemple de déclaration :

<form class="zdk-form">
	<select class="zdk-dropdown" data-zdk-action="mycontroller:myaction"></select>
</form>

Cet attribut initialise l'option noSelectionOption.

La valeur _ (caractère de soulignement) est celle définie pour cette option.

Exemple de déclaration :

<form class="zdk-form">
	<select class="zdk-dropdown" data-zdk-noselection="Select a value..."></select>
</form>

Cet attribut initialise l'option defaultSelectedValue.

Exemple de déclaration :

<form class="zdk-form">
	<select class="zdk-dropdown" data-zdk-value="fr"
		data-zdk-action="mycontroller:data">
	</select>
</form>

Exemple de déclaration :

<form class="zdk-form">
	<select class="zdk-dropdown" data-zdk-loadoncreate="no"
		data-zdk-action="mycontroller:data">
	</select>
</form>

Exemple d'appel :

$("#mydropdown").zdkdropdown({
	controller:'mycontroller',
	action:'myaction'
});

Exemple d'appel :

$("#mydropdown").zdkdropdown({
	noSelectionOption:'Select a value...'
});

Exemple d'appel :

			$("#mydropdown").zdkdropdown({
				defaultSelectedValue:'fr'
			});

Exemple d'appel :

			$("#mydropdown").zdkdropdown({
				loadOnCreate:'no'
			});

Le paramètre optionnel keepSelection lorsqu'il est passé à la méthode avec la valeur true, a pour effet de conserver la sélection courante des éléments de la liste de choix après son rafraîchissement.

Exemple d'appel :

			$("#mydropdown").zdkdropdown('refresh');

Si une des options dispose de la propriété HTML selected, elle est sélectionnée par défaut. Autrement, la première option en haut de la liste déroulante est sélectionnée.

Exemple d'appel :

			$("#mydropdown").zdkdropdown('resetSelection');

Les données sont retournées sous la forme d'un objet JavaScript. Autrement retourne la valeur false si aucune donnée ne peut être retournée.

Exemple d'appel :

			var selectedData = $("#mydropdown").zdkdropdown('getDataOfSelectedValue');
			if (selectedData) {
				alert(selectedData.city);
			}

Exemple d'appel :

			$("#mydropdown").zdkdropdown({
				dataloaded: function() {
					alert('Data loaded!');
				}
			});

• label : intitulé d'affichage de l'élément dans la liste déroulante,
• value : valeur associée à l'élément de la liste déroulante.

Exemple de réponse JSON :

{"rows":[
		{"label":"Option 1","value":"1"},
		{"label":"Option 2","value":"2"},
		{"label":"Option 3","value":"3"},
		{"label":"Option 4","value":"4"}
], "success":true}

Si la déclaration HTML de l'arbre est effectuée à l'intérieur d'un formulaire zdkform, alors l'attribut data-name doit être nécessairement renseigné pour que le formulaire transmette dans le paramètre POST idoine, le tableau d'identifiants des noeuds sélectionnés dans l'arbre.

Le nom renseigné pour l'attibut data-name doit nécessairement se terminer par des crochets ouvrants et fermants ( [] ) pour que les identifiants de noeuds sélectionnés dans l'arbre et transmis dans le paramètre POST de même nom, soient reconnus et lus en PHP à l'aide d'une variable de type tableau.

Exemple d'appel :

	<div id="mytree" data-name="node_ids[]"></div>
                

Exemple d'appel :

$("#mytree").zdktree({
	controller:'mycontroller',
	action:'myaction'
});

Par défaut, le clic d'un noeud de l'arbre ne sélectionne que le noeud cliqué.
Lorsque l'option autoSelectFamily est définie à true, le clic d'un noeud parent sélectionne le parent et toute sa descendance. Le clic d'un noeud enfant sélectionne l'enfant et tous ses parents.

Exemple d'appel :

$("#mytree").zdktree({
	autoSelectFamily:true
});

• name : est le nom renseigné pour l'attribut data-name de la DIV déclarée en HTML et correspondant au composant zdktree.
• value : identifiant du noeud sélectionné dans l'arbre.

Exemple d'appel :

			var selectedNodes = new Array();
			selectedNodes = $("#mytree").zdktree('getSelection');

			/* Si l'attribut data-name de l'arbre vaut 'node_ids[]' et que les identifiants
			de noeux sélectionnés sont 7 et 12, le tableau retourné par la méthode est :
			[{name: 'node_ids[]',value: 7},{name: 'node_ids[]',value: 12}] */
                

Exemple d'appel :

			var selectedNodes = new Array(4,7,12);
			$("#mytree").zdktree('selectNodes',selectedNodes);

Exemple d'appel :

			$("#mytree").zdktree({
				dataloaded: function() {
					alert('Data loaded!');
				}
			});

• label : intitulé d'affichage du noeud de l'arbre,
• data : valeur associée au noeud de l'arbre.
• children : tableau des noeuds enfants du noeud courant.

Exemple de réponse JSON :

{
	"success":true,
	"treenodes":[
		{"label":"Home","data":"home","children":[]},
		{"label":"Customize","data":"custom","children":[
			{"label":"Themes","data":"themes","children":[]},
			{"label":"Example","data":"example","children":[]}
		]},
		{"label":"Authorizations","data":"authoriz","children":[
			{"label":"Users","data":"users","children":[]},
			{"label":"Profiles","data":"profiles","children":[]}
		]}
	]
}

Lorsque le formulaire zdkform est branché à un contrôleur d'application, le paramètre POST contenant la valeur du bouton radio sélectionné, est nommé à partir du nom indiqué pour l'attribut data-name.

Si un des boutons radio dispose de la propriété HTML checked, il est sélectionné par défaut. Autrement, aucun bouton radio n'est sélectionné par défaut.

Exemple d'appel :

			$("#myrbgroup").zdkradiobuttongroup('resetSelection');

Exemple d'appel :

<form class="zdk-form">
	<input type="text" class="zdk-autocomplete"
		data-zdk-action="mycontroller:myaction">
</form>

Exemple d'appel :

<form class="zdk-form">
	<input type="text" class="zdk-autocomplete"
		data-zdk-action="mycontroller:myaction"
		data-zdk-autowidth="true">
</form>

Exemple d'appel :

<form class="zdk-form">
	<input type="text" class="zdk-autocomplete"
		data-zdk-action="mycontroller:myaction"
		data-zdk-delay="400">
</form>

Exemple d'appel :

$("#myautocomplete").zdkautocomplete({
	controller:'mycontroller',
	action:'myaction'
});

Exemple d'appel :

$("#myautocomplete").zdkautocomplete({
	controller:'mycontroller',
	action:'myaction',
	autoWidth: true
});

Exemple d'appel :

$("#myautocomplete").zdkautocomplete({
	controller:'mycontroller',
	action:'myaction',
	criteria: JSON.stringify({criterium1: '18', criterium2: 'ABC'})
});

Exemple d'appel :

			$('#myautocomplete').zdkautocomplete('enable');

Exemple d'appel :

			$('#myautocomplete').zdkautocomplete('disable');

Exemple d'appel :

			$('#myautocomplete').zdkautocomplete('suspend',true);

Exemple d'appel :

			$('#myautocomplete').zdkautocomplete('setCriteria','blue');

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-action="mycontroller:myaction">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-selbuttonlabel="Choose...">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-nofilelabel="No file selected!">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-icon="ui-icon-folder-open">
</form>

Disponible à partir de la version 2.9 de ZnetDK.

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-photoreductpercent="50">
</form>

Disponible à partir de la version 2.9 de ZnetDK.

Exemple de définition :

<form class="zdk-form">
	<input type="file" data-zdk-minphotosizetoreduct="1200">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" title="Select a file...">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" class="zdk-nosubmit">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" class="zdk-nothumbnail">
</form>

Exemple de définition :

<form class="zdk-form">
	<input type="file" class="zdk-autoupload">
</form>

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	controller:'mycontroller',
	action:'myaction'
});

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	showThumbnail:false /* No thumbnail displayed */
});

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	selectButtonLabel:'Choose...'
});

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	selectButtonIcon:'ui-icon-image'
});

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	noFileLabel:'no file selected!'
});

Disponible à partir de la version 2.9 de ZnetDK.

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	photoReductionPercent: 50
});

Disponible à partir de la version 2.9 de ZnetDK.

Exemple d'appel :

$("#myinputfile").zdkinputfile({
	minPhotoSizeForReduction: 1200
});

Exemple d'appel :

			var fileName = $("#myinputfile").zdkinputfile('getFileName');

Exemple d'appel :

			var fileSize = $("#myinputfile").zdkinputfile('getFileSize');

Exemple d'appel :

			var fileType = $("#myinputfile").zdkinputfile('getFileType');

Exemple d'appel :

			if ($("#myinputfile").zdkinputfile('isFileSelected')) {
				alert('A file has been choosen.');
			} else {
				alert('No file selected!');
			}

En option, la fonction callback lorsqu'elle est spécifiée en paramètre de la méthode, permet d'interroger la réponse à la requête HTTP de téléchargement.

Exemple d'appel :

			$("#myinputfile").zdkinputfile('upload', function(response) {
				if (response.success) {
					alert('Upload has succeeded.');
				} else {
					alert('Upload has failed!');
				}
			});

Exemple d'appel :

			$("#myinputfile").zdkinputfile('reset');

Exemple d'appel :

			$("#myinputfile").zdkinputfile('setFocus');

• url[string] : URL de téléchargement de la vignette à afficher pour le composant.
• mimeType[string] : type MIME du fichier téléchargé.
• filename[string] : nom d'origine du fichier téléchargé.

Exemple d'appel :

			$("#myinputfile").zdkinputfile('setUploadedFile', {
				url: '/znetdk/?control=zdkedocctrl&action=download&id=28',
				mimeType: 'image/png',
				fileName: 'mypicture.png'
			});

Exemple d'appel :

			$("#myinputfile").zdkinputfile({
				reset: function() {
					alert('Reset event catched!');
				}
			});

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-zdk-action="mycontroller:myaction"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-zdk-selbuttonlabel="Attach..."></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-zdk-icon="fa-paperclip"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-zdk-accept=".pdf"></div>
</form>

Disponible à partir de la version 2.9 de ZnetDK.

Exemple de définition :

<form class="zdk-form">
        <div class="zdk-multiupload" data-zdk-photoreductpercent="50"></div>
</form>

Disponible à partir de la version 2.9 de ZnetDK.

Exemple de définition :

<form class="zdk-form">
        <div class="zdk-multiupload" data-zdk-minphotosizetoreduct="1200"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-required="true"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" data-name="my_files"></div>
</form>

Exemple de définition :

<form class="zdk-form">
	<div class="zdk-multiupload" title="Attach a new file"></div>
</form>

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	controller:'mycontroller',
	action:'myaction'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	selectButtonLabel:'Attach...'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	selectButtonIcon:'fa-paperclip'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	selectButtonTooltip:'Attach a new file'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	inputNameAttribute:'my_files'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	acceptedFiles: '.pdf'
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	photoReductionPercent: 50
});

Exemple d'appel :

$("#mywidget").zdkmultiupload({
	minPhotoSizeForReduction: 1200
});

Exemple d'appel :

			$("#mywidget").zdkmultiupload('disable');

Exemple d'appel :

			$("#mywidget").zdkmultiupload('enable');

Exemple d'appel :

var files = [
    {filename:'file_1.doc', url:'http://www.myapp/fileid/18'},
    {filename:'file_2.doc', url:'http://www.myapp/fileid/87'}
];
$("#mywidget").zdkmultiupload('setUploadedFiles', files);

Si la déclaration HTML du composant est effectuée à l'intérieur d'un formulaire zdkform, alors l'attribut data-name doit être nécessairement renseigné pour que le formulaire transmette dans le paramètre POST idoine, le tableau d'identifiants des éléments sélectionnés.

Le nom renseigné pour l'attibut data-name est affecté à l'attribut name des 2 éléments HTML <select> déclarés pour le composant auquel sont ajoutés les crochets ouvrants et fermants ( [] ) pour que les identifiants sélectionnés et transmis dans le paramètre POST de même nom, soient reconnus et lus en PHP à l'aide d'une variable de type tableau.

Exemple de définition :

<form class="zdk-form">
    <div class="zdk-picklist" data-name="my_picklist">
        <select></select>
        <select></select>
    </div>
</form>

Exemple de définition :

<form class="zdk-form">
    <div class="zdk-picklist" data-name="my_picklist"
            data-zdk-action="mycontroller:myaction">
        <select></select>
        <select></select>
    </div>
</form>

Exemple de définition :

<form class="zdk-form">
    <div class="zdk-picklist" data-name="my_picklist"
            data-zdk-action="mycontroller:myaction"
            data-zdk-autoload="false">
        <select></select>
        <select></select>
    </div>
</form>

Exemple de définition :

<form class="zdk-form">
    <div class="zdk-picklist" data-name="my_picklist"
            data-zdk-action="mycontroller:myaction"
            data-zdk-filter="true">
        <select></select>
        <select></select>
    </div>
</form>

Exemple de définition :

<form class="zdk-form">
    <div class="zdk-picklist" data-name="my_picklist">
        <select title="Source header..."></select>
        <select title="Target header..."></select>
    </div>
</form>

Exemple d'appel :

$("#mywidget").zdkpicklist({
	controller:'mycontroller',
	action:'myaction'
});

Exemple d'appel :

$("#mywidget").zdkpicklist({
	controller:'mycontroller',
	action:'myaction'
	criteria: {criterium1: 18, criterium2: 'ABC'}
});

Exemple d'appel :

var selection = $("#mywidget").zdkpicklist('getSelection');
alert(selection[0].value);
                

Exemple d'appel :

                    $("#mywidget").zdkpicklist('refresh', {criterium1: 18, criterium2: 'ABC'});

Exemple d'appel :

			$("#mywidget").zdkpicklist('reset');

Exemple d'appel :

			$("#mywidget").zdkpicklist({
				dataloaded: function() {
					alert('Data loaded!');
				}
			});