Maison  >  Article  >  interface Web  >  Exemple de code de la case à cocher de la table layui sélectionner toutes les fonctions de style

Exemple de code de la case à cocher de la table layui sélectionner toutes les fonctions de style

小云云
小云云original
2018-03-09 09:23:362620parcourir

Cet article partage principalement avec vous un exemple de sélection de tous les styles et fonctions de la case à cocher layui table. J'espère qu'il pourra vous aider. Dans la version précédente, la case à cocher par défaut doit avoir une valeur. La valeur par défaut est "check". Elle ne convient pas pour effectuer des sélections dans le formulaire et est difficile à modifier. Heureusement, une fois Layui mis à niveau, il peut prendre en charge le fait de ne pas écrire le formulaire. name value , pour s'adapter à l'opération de sélection dans le tableau.

1. Le numéro de version de 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('checkbox(allChoose)', function(data){
		 var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
		 child.each(function(index, item){
		  item.checked = data.elem.checked;
		 });
		 form.render('checkbox');
		});
	</script>

2. Le numéro de version est la version v1.0.9 rls et les versions précédentes doivent être. mis à jour plusieurs fois Fichier

(a) fichier layui.all.js dans layuilaydest

(b) fichier form.js dans layuilaymodules

(c) layui.css dans Fichier layuicss

Écrasez les trois fichiers ci-dessus de la dernière version par la version originale et vous pourrez facilement implémenter le style de case à cocher.

Recommandations associées :

Implémentation JS de l'exemple de code d'effet de sélection unique checkBox

Deux colonnes de CheckBox dans le tableau peuvent être sélectionné uniquement Un code jQuery

Comment embellir le style de la case à cocher et de la radio HTML

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