Maison >interface Web >js tutoriel >Case à cocher du tableau Layui, sélectionnez tous les exemples de styles et de fonctions

Case à cocher du tableau Layui, sélectionnez tous les exemples de styles et de fonctions

亚连
亚连original
2018-05-31 17:23:564716parcourir

Ci-dessous, je vais partager avec vous un exemple de sélection de tous les styles et fonctions dans une case à cocher d'un tableau layui. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans la version précédente, la case à cocher par défaut doit avoir une valeur. La valeur par défaut est le mot "check". Elle ne convient pas pour faire des sélections dans le formulaire et est difficile à modifier après la mise à niveau de Layui. , Il peut prendre en charge le fait de ne pas écrire la valeur du nom pour s'adapter à l'opération de sélection dans le tableau.

1. Le numéro de version layui est la version v1.0.9 rls (actuellement la dernière version)

<span style="white-space:pre;">	</span><p class="layui-form">
	 <table class="layui-table">
	 <thead>
	  <tr>
	  <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
	  <th>人物</th>
	  <th>民族</th>
	  <th>出场时间</th>
	  <th>格言</th>
	  </tr> 
	 </thead>
	 <tbody>
	  <tr>
	  <td><input type="checkbox" name="" lay-skin="primary"></td>
	  <td>贤心</td>
	  <td>汉族</td>
	  <td>1989-10-14</td>
	  <td>人生似修行</td>
	  </tr>
	  <tr>
	  <td><input type="checkbox" name="" lay-skin="primary"></td>
	  <td>张爱玲</td>
	  <td>汉族</td>
	  <td>1920-09-30</td>
	  <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
	  </tr>
	 </tbody>
	 </table>
	</p>
	<script type="text/javascript" src="plugins/layui/lay/dest/layui.all.js"></script>
	<script type="text/javascript">
		var $ = layui.jquery,
			form = layui.form();
		//全选
		form.on(&#39;checkbox(allChoose)&#39;, function(data){
		 var child = $(data.elem).parents(&#39;table&#39;).find(&#39;tbody input[type="checkbox"]&#39;);
		 child.each(function(index, item){
		  item.checked = data.elem.checked;
		 });
		 form.render(&#39;checkbox&#39;);
		});
	</script>

2. Les versions antérieures à la v1.0.9 rls doivent mettre à jour plusieurs fichiers

(a) layui.all dans le fichier layuilaydest <.>

(b) fichier form.js dans layuilaymodules

(c) fichier layui.css dans layuicss

Écraser les trois fichiers ci-dessus de la dernière version En revenant à la version originale , vous pouvez facilement implémenter le style de case à cocher.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée de l'utilisation simple de vuex

Méthode de chargement coulissant des données du cadre d'interface utilisateur mobile Vue

Comment implémenter le chargement paresseux du routage de vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn