Beispiel für die Auswahl des Kontrollkästchens „Alle Stile und Funktionen der Laui-Tabelle auswählen“.

Im Folgenden werde ich Ihnen ein Beispiel für die Auswahl aller Stile und Funktionen in einem Laui-Tabellen-Kontrollkästchen vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

In der vorherigen Version muss das Standard-Kontrollkästchen einen Wert haben. Es ist nicht für die Auswahl im Formular geeignet und lässt sich nach dem Laui-Upgrade nur schwer ändern , Es kann unterstützt werden, den Namenswert nicht zu schreiben, um ihn an den Auswahlvorgang in der Tabelle anzupassen.

1. Die Laui-Versionsnummer ist v1.0.9 rls-Version (derzeit die neueste 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. Versionen vor v1.0.9 rls müssen mehrere Dateien aktualisieren

(a) Datei „layui.all.js“ in „layuilaydest“

(b) Datei „form.js“ in „layuilaymodules“

(c) Datei „layui.css“ in „layuicss“

Sie können die oben genannten drei Dateien problemlos von der neuesten Version auf die Originalversion überschreiben Implementieren Sie den Kontrollkästchenstil.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der einfachen Verwendung von Vuex

Vue Mobile UI Framework gleitende Lademethode für Daten

So implementieren Sie Lazy Loading von Vue-Routing

Das obige ist der detaillierte Inhalt vonBeispiel für die Auswahl des Kontrollkästchens „Alle Stile und Funktionen der Laui-Tabelle auswählen“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!