Déroulement de champs, avancé

Comment utilisé le déroulement de champs afin de créer de petite interaction utilisateur.

• Requête ajax personalisé
• Ajouter un control fieldflow
• Ajout ou retirer des classes CSS
• Appliquer des actions par défaut et pour la réinitialisation
• Définir une action de base
• Redéfinir les comportement par défault lors d'une configuration simple
• Interrogation et intégration aux formulaires
• Basculer
• Filtrage de tableaux

Requête ajax personalisé

<section id="ajaxPanel" class="panel panel-primary">
	<header class="panel-heading">
		<h3 class="panel-title"><code>id="ajaxPanel"</code> Paneau a des fins d'example pratique</h3>
	</header>
	<div class="panel-body">
		<p>(Pour illustrer le comportement de la configuration <code>container</code> et de la configuration <code>clean</code>)</p>
	</div>
</section>

<div class="wb-fieldflow">
	<p>Choisissez du contenu à insérer:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">Ensemble 1</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-1.html", "live": true}'>Ensemble 1 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "live": true}'>Ensemble 3 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "live": true}'>Ensemble 4 - Effectuer immédiatement</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html"}'>Ensemble 2 - Appel équivalente avec une configuration différente dans data-wb-fieldflow</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html", "type": "replace"}'>Ensemble 2 - Appel équivalent avec une configuration différentes qui définie le type de requête ajax</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 3 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 4 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body", "type": "append"}'>Ensemble 4 - Ajoute le contenu au récipient: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body", "type": "prepend", "clean": "#ajaxPanel .panel-body"}'>Set 3 - Insert le contenu au début du récipent $("#ajaxPanel .panel-body") et le vide (clean) lors du changement de sélection</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html"}'>Ensemble 5</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html", "trigger": true}'>Ensemble 5 - avec initialisation de plugiciel</li>
	</ul>
</div>

Ajouter un control fieldflow

<div class="wb-fieldflow">
	<p>Trouvez le plugiciel qui répond à vos besoin:</p>
	<ul>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Insertion de contenu</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Galerie photos</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Dessiner des graphiques</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Contenu affichable/masquable</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Uniformisation de la hauteur</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"},
			{"action": "append", "source": "#question-langue"}
		]'>Afficher un contenu superposé</li>

	</ul>
</div>

<div id="question-langue" class="hidden">
	<p>Quel langue?</p>
	<ul>
		<li id="append-ex-fr">Français</li>
		<li id="append-ex-en">Anglais</li>
	</ul>
</div>

Cela est équivale à:

<div class="wb-fieldflow">
	<p>Trouvez le plugiciel qui répond à vos besoin:</p>
	<ul>
		<li>Insertion de contenu
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
		<li>Galerie photos
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
		<li>Dessiner des graphiques
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
		<li>Contenu affichable/masquable
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
		<li>Uniformisation de la hauteur
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
		<li>Afficher un contenu superposé
			<div class="wb-fieldflow-sub">
				<p>Quel langue?</p>
				<ul>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html">Français</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Anglais</a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Ajout ou retirer des classes CSS

Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#addremoveCSSexample", "class": "text-muted text-primary text-success text-info text-warning text-danger" }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

<p id="addremoveCSSexample">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>

Appliquer des actions par défaut et pour la réinitialisation

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#resetdefaultExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph1-fr", "live": true }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-fr", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

Fichier ajax/paragraph.html

<!DOCTYPE html>
<html>
<!-- DataAjaxFragmentStart -->

<div lang="en">
	<div id="paragraph1-en">
		<p id="resetdefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph2-en">
		<p id="definebaseExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph3-en">
		<p id="defineDefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>
</div>

<div lang="fr">
	<div id="paragraph1-fr">
		<p id="resetdefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph2-fr">
		<p id="definebaseExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph3-fr">
		<p id="defineDefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>
</div>

<!-- DataAjaxFragmentEnd -->
</html>

Définir une action de base

Cet exemple applique la même action pour n'importe lequel des items sélectionné, exécute les actions défini dans "reset" lors de la réinitialisation du contrôle et chaque action hérite de l'action de base.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph2-fr", "live": true },
		"base" : { "action": "addClass", "source":"#definebaseExample-fr" }
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow='{ "class": "text-muted" }'>Sourde</li>
		<li data-wb-fieldflow='{ "class": "text-primary" }'>Primaire</li>
		<li data-wb-fieldflow='{ "class": "text-success" }'>Succès</li>
		<li data-wb-fieldflow='{ "class": "text-info" }'>Renseignement</li>
		<li data-wb-fieldflow='{ "class": "text-warning" }'>Avertissement</li>
		<li data-wb-fieldflow='{ "class": "text-danger" }'>Danger</li>
	</ul>
</div>

Redéfinir les comportement par défault lors d'une configuration simple

Change le comportement par défaut lors de la configuration de la liste des items.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-fr", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph3-fr", "live": true },
		"actionData" : { "source":"#defineDefaultExample-fr" },
		"action": "addClass",
		"prop": "class"
	}'>
	<p>Changer la couleur du paragraphe suivant:</p>
	<ul>
		<li data-wb-fieldflow="text-muted">Sourde</li>
		<li data-wb-fieldflow="text-primary">Primaire</li>
		<li data-wb-fieldflow="text-success">Succès</li>
		<li data-wb-fieldflow="text-info">Renseignement</li>
		<li data-wb-fieldflow="text-warning">Avertissement</li>
		<li data-wb-fieldflow="text-danger">Danger</li>
	</ul>
</div>

Interrogation et intégration aux formulaires

<div id="myformid" class="wb-frmvld hidden">
<form action="wb-fieldflow-advanced.php" class="col-md-12">
	
	<fieldset>
		<legend><span class="field-name">Mes animeaux favories</span></legend>
		<div class="checkbox">
			<label for="animal5"><input type="checkbox" name="animal" value="Chien" id="animal5" /> Chien</label>
		</div>
		<div class="checkbox">
			<label for="animal6"><input type="checkbox" name="animal" value="Chat" id="animal6" /> Chat</label>
		</div>
		<div class="checkbox">
			<label for="animal7"><input type="checkbox" name="animal" value="Poisson" id="animal7" /> Poisson</label>
		</div>
		<div class="checkbox">
			<label for="animal8"><input type="checkbox" name="animal" value="Serpent" id="animal8" /> Serpent</label>
		</div>
	</fieldset>


	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true, "unhideelm": "#myformid"}'>
		<p>Vous désirez plus de renseignement à propos?</p>
		<ul>
			<li>L'habitat
				<div class="wb-fieldflow-sub">
					<p>Quel type d'habitat vous vous intéresser?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"sauvage"}'>Sauvage</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"HabRecommendé"}'>Recommendé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"intérieur"}'>À l'intérieur</li>
						<li data-wb-fieldflow='[
							{"action": "query", "name":"moreinfo", "value":"extérieur"},
							{"action": "redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"}
						]'>à l'éxtérieur</li>
				</div>
			</li>
			<li>La nouriture
				<div class="wb-fieldflow-sub">
					<p>Quel type de nourriture vous vous intéresser?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"santé"}'>Santé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"nouRecommendé"}'>Recommandé</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"éviter"}'>à éviter</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"tendance"}'>Tendance</li>
				</div>			
			</li>

		</ul>
	</div>
	
	
	<input class="mrgn-bttm-lg" type="submit" value="Soummetez et regardé l'URL de la page de résultat" />
</form></div>

<details id="myformidAlternate">
	<summary>Version alternative permettant d'obtenir la même informatio que le formulaire précédent.</summary>
	
	<p>Chien:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Chien&moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=santé">Nouriture santé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chien&moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Chat:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Chat&moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=santé">Nouriture santé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Chat&moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Poisson:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Poisson&moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=santé">Nouriture santé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Poisson&moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
	<p>Serpent:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=sauvage">Habitation sauvage</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=HabRecommendé">Habitation recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=intérieur">Habitation à l'intérieur</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Serpent&moreinfo=extérieur">Habitation à l'extérieur</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=santé">Nouriture santé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=nouRecommendé">Nouriture recommendé</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=éviter">Nouriture à éviter</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Serpent&moreinfo=tendance">Nouriture tendance</a></li>
	</ul>
</details>

Basculer

toggle: {
	stateOn: "visible",
	stateOff: "hidden"
}

<div class="wb-fieldflow">
	<p>Choisissez un contenu à basculer?</p>
	<ul>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-premier"}'>Basculer le premier</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-second"}'>Basculer le second</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-premier, #basculer-second"}'>Basculer les deux</li>
	</ul>
</div>

<div id="basculer-premier" class="well hidden">
	<p>Ceci est le premier <code>@id=basculer-premier</code></p>
</div>

<div id="basculer-second" class="jumbotron hidden">
	<p>Ceci est le second <code>@id=basculer-second</code></p>
</div>

Sans bouton de soumission

<div class="wb-frmvld"><form method="get">	
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
		<p>Choisissez un contenu à basculer?</p>
		<ul>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-troisieme", "live": true}' data-wb-toggle='{"stateOn": "visible", "stateOff":"hidden"}'>Basculer le troisième</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-quatrieme", "live": true}'>Basculer le quatrième</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#basculer-troisieme, #basculer-quatrieme", "live": true}'>Basculer les deux</li>
		</ul>
	</div>

	<div id="basculer-troisieme" class="well hidden">
		<p>Ceci est le troisième <code>@id=basculer-troisieme</code></p>
	</div>

	<div id="basculer-quatrieme" class="jumbotron hidden">
		<p>Ceci est le quatrième <code>@id=basculer-quatrieme</code></p>
	</div>
		
</form></div>

Filtrage de tableaux

<div class="wb-frmvld"><form method="get">	
<div class="wb-fieldflow" data-wb-fieldflow='
		{
			"srctype": "tblfilter",
			"noForm": true,
			"source": "#table-filtering-example",
			"fltrseq": [
				{"column": 2},
				{"column": 3}
			],
			"limit": 3
		}'></div>
</form></div>

<table id="table-filtering-example" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Titre</th>
			<th>Date de publication</th>
			<th>Résumé</th>
			<th>Sujets</th>
		</tr>
	</thead>
	<tbody lang="en">
		<tr>
			<th><a href="http://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>
		
		[...]
		
	</tbody>
</table>

Filtrage avec une interface personalisé Filtrage de tableaux

<div id="table-filtering-example2-form" class="wb-frmvld hidden">
	<form>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true, "unhideelm": "#table-filtering-example2-form" }'>
			<p>Filter par sujet:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Agriculture"
				}'>Agriculture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Society"
				}'>Society and Culture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "table#-filtering-example2",
					"column": 3,
					"value": "Arts"
				}'>Arts</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Music"
				}'>Music</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Literature"
				}'>Literature</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Transport"
				}'>Transport</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Economics"
				}'>Economics and Industry</li>
			</ul>
		</div>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true }'>
			<p>Filter par audience:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Business"
				}'>Business</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Farmers"
				}'>Farmers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Public"
				}'>General Public</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Media"
				}'>Media</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2
					"value": "Rural"
				}'>Rural Community</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Travellers"
				}'>Travellers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Visitors"
				}'>Visitors</li>
			</ul>
		</div>
	</form>
</div>

<table id="table-filtering-example2" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Titre</th>
			<th>Date de publication</th>
			<th>Résumé</th>
			<th>Sujets</th>
		</tr>
	</thead>
	<tbody lang="en">
		<tr>
			<th><a href="http://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>
		
		[...]
		
	</tbody>
</table>

Un autre example de filtrage de tableau

<div class="row">
	<div class="col-md-3">
		<section>
			<h4 class="wb-inv">Options de filtrage</h4>
			<div class="wb-frmvld"><form>	
					<div class="wb-fieldflow" data-wb-fieldflow='
							{
								"srctype": "tblfilter",
								"noForm": true,
								"source": "#dataset-filter",
								"fltrseq": [
									{"column": 3, "csvextract": true, "defaultselectedlabel": "Toutes les type de nouvelle", "label":"Type de nouvelle"},
									{"column": 2, "csvextract": true, "defaultselectedlabel": "De tous les département", "label":"Département"},
									{"column": 8, "csvextract": true, "defaultselectedlabel": "Relative à tous les ministère", "label":"Ministère"},
									{"column": 6, "csvextract": true, "defaultselectedlabel": "Tous le mondes", "label":"Pour"},
									{"column": 5, "csvextract": true, "defaultselectedlabel": "Partout", "label":"Endroit"}
								]
							}'></div>
			</form></div>
		</section>
	</div>
	<div class="col-md-9">
		<table class="wb-tables table table-striped table-hover" id="dataset-filter" aria-live="polite" data-wb-tables='{
					"bDeferRender": true,
					"ajaxSource": "http://wet-boew.github.io/wet-boew/demos/tables/ajax/datasource.json",
					"order": [5, "desc"],
					 "columns": [
						{ "data": "TITLE", "className": "nws-tbl-ttl h4" },
						{ "data": "PUBDATE", "className": "nws-tbl-date" },
						{ "data": "DEPT", "className": "nws-tbl-dept" },
						{ "data": "TYPE", "className": "nws-tbl-type" },
						{ "data": "TEASER",  "className": "nws-tbl-desc" },
						{ "data": "LOCATION",  "visible": false },
						{ "data": "AUDIENCE",  "visible": false },
						{ "data": "SUBJECT", "visible": false },
						{ "data": "MINISTER", "visible": false }
					  ]}'>
			<thead>
				<tr>
					<th>Titre</th>
					<th>Date de publication</th>
					<th>Département</th>
					<th>Type de nouvelle</th>
					<th>Résumé</th>
					<th>Endroit</th>
					<th>Pour</th>
					<th>Sujets</th>
					<th>Ministère</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

Date modified:

2016-11-29