I have a Matrix style Grid that allows to updatye some user permissions for items on a Per user basis.
It uses a Table grid and issues an AJAX request to update each setting instantly as clicked on.
I just added some jQuery
code to mass check and un-check all checkboxes for a User row.
The issue I have is I need to make it also make the AJAX request for all those checkboxes in a Row when the Row is mass checked
or un-checked
I have all code below for the demo and a JSFiddle demo.
JSFiddle Demo: http://ift.tt/1JphwWw
Preview Image:
JavaScript/jQuery:
$(document).ready(function() {
// Check/Un-check All checkboxes in a User Row
$(".checkall").click(function(){
$(this).parents('tr').find(':checkbox').prop('checked', this.checked);
});
// Make AJAX Request to Update User Permission setting in Backend Database
$(".flipswitch").change(function () {
var flip = $(this).closest('td');
//alert("perm_id="+this.value+"&permissions=" + this.checked);
$.ajax({
type: 'post',
url: '<?php echo $_SERVER['PHP_SELF']; ?>',
data: "perm_id="+ this.value + "&permission=" + this.checked,
success: function() {
flip.effect("highlight", {color:"#12D812"}, 2000)
}
});
});
});
Table HTML:
<table>
<tbody>
<tr class="table_header">
<th> </th>
<th align="center">http://ift.tt/1Jphvlq;
<th align="center">http://ift.tt/1GtqgY3;
<th align="center">http://ift.tt/1JphwWC;
<th align="center">http://ift.tt/1GtqgY5;
<th align="center">http://ift.tt/1JphwWE;
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 1-1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="0" type="checkbox" value="1">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="1" type="checkbox" value="2">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="2" type="checkbox" value="3">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="3" type="checkbox" value="4">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="4" type="checkbox" value="5">1</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 2-2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="5" type="checkbox" value="6">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="6" type="checkbox" value="7">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="7" type="checkbox" value="8">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="8" type="checkbox" value="9">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="9" type="checkbox" value="10">2</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 3-3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="10" type="checkbox" value="11">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="11" type="checkbox" value="12">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="12" type="checkbox" value="13">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="13" type="checkbox" value="14">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="14" type="checkbox" value="15">3</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 4-4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="15" type="checkbox" value="16">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="16" type="checkbox" value="17">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="17" type="checkbox" value="18">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="18" type="checkbox" value="19">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="19" type="checkbox" value="20">4</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 5-5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="20" type="checkbox" value="21">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="21" type="checkbox" value="22">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="22" type="checkbox" value="23">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="23" type="checkbox" value="24">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="24" type="checkbox" value="25">5</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 6-6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="25" type="checkbox" value="26">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="26" type="checkbox" value="27">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="27" type="checkbox" value="28">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="28" type="checkbox" value="29">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="29" type="checkbox" value="30">6</td>
</tr>
</tbody>
</table>
little CSS:
table { border: 1px solid #000; }
th { background-color: #CCC; }
td { border: 1px solid #CCC; }
Aucun commentaire:
Enregistrer un commentaire