J'ai créé une grille de données expand/collapse en utilisant jQuery. La grille de données a les fonctionnalités suivantes comme Ajouter/Cloner/Supprimer/Sélectionner toutes les lignes de la table.jQuery Add/Del/
J'ai implémenté pour Add. Quelqu'un peut-il me donner quelques conseils pour del/clone/select all ...?
Voici la mise en œuvre: http://jsfiddle.net/pixelfx/3fwyf/5/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var lastRowCount = 5;
$('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function() {
$(this).siblings('.child-' + this.id).toggle();
});
$('tr[class^=child-]').hide();
//var orderTable = $("#example");
$("#btnAdd").live('click', function (e) {
//Take the text, and also the ddl value and insert as table row.
var newRow = '<tr class="child-row123"><td class="brdr"> </td><td class="brdr"></td><td class="brdr"> </td><td class="brdr"> </td><td><input name="checkboxNNNN" type="checkbox" id="checkboxNNNN" class="SelectCheckBox" /></td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
$("#example tbody").append(newRow.replace(/NNNN/g, ++lastRowCount));
//var $orderTable = $("#example");
});
$('#btnDelete').live('click', function (e) {
$('.SelectCheckBox:visible:checked').parents('tr').remove();
});
$('#btnCopy').live('click', function (e) {
$("#example tbody").append($('.SelectCheckBox:visible:checked').parents('tr').clone());
});
$('#btnSelectAll').live('click', function (e) {
$("#example").find('.SelectCheckBox:visible').attr('checked', true);
});
$('#cbSelectUnselectAll').live('click', function() {
$("#example").find('.SelectCheckBox:visible').attr('checked', $(this).prop('checked'));
});
});
</script>
<style type="text/css">
table.detail, table.detail td, table.detail th
{
border-collapse: collapse;
border: 1px solid black;
}
table.detail tr.parent
{
font-weight: bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="detail" id="example"
style="border: none;">
<thead>
<tr>
<th width="10%">
Customer Item
</th>
<th colspan="2">
</th>
<th width="12%" rowspan="2">
Variable Header Data Field
</th>
<th width="8%" rowspan="2">
PO Number
</th>
<th width="2%" rowspan="2">
</th>
<th width="10%" rowspan="2">
Available Quantity
</th>
<th colspan="2" rowspan="2">
Quantity to Order
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
</tr>
<tr>
<th>
Fulfillment type
</th>
<th colspan="2">
<select name="fulfillmenttype" id="fulfillmenttype">
<option selected="selected">In-Plant</option>
<option>Service Bureau</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr id="row123" class="parent" style="cursor: pointer;" title="Click to expand/collapse">
<td>
Request type
</td>
<td colspan="2">
<input name="checkbox4" type="checkbox" id="checkbox4" checked="checked" />
</td>
<td>
J94
</td>
<td>
123456
</td>
<td>
</td>
<td>
200
</td>
<td width="7%">
180
</td>
<td width="5%">
198
</td>
<td>
<input name="textfield" type="text" id="textfield" value="11111" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td width="6%" class="brdr">
</td>
<td width="10%" class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox" class="SelectCheckBox" id="checkbox" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield2" type="text" id="textfield2" value="2222" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox2" id="checkbox2" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield3" type="text" id="textfield3" value="3333" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox3" id="checkbox3" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield4" type="text" id="textfield4" value="44444" />
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<label>
</label>
<input type="button" id="btnAdd" value="Add row" />
<input type="button" id="btnDelete" value="Remove Row" />
<input type="button" id="btnCopy" value="Copy Row" />
<!--<input type="button" id="btnSelectAll" value="Select All" />-->
<input type="checkbox" id="cbSelectUnselectAll" />Select/Unselect All
</body>
</html>
pour la démo en direct voir ce lien: http://jsfiddle.net/nanoquantumtech/9umGT/ – Thulasiram
si vous souhaitez supprimer/copier la dernière ligne ou une ligne sélectionnée? comment une rangée peut-elle être sélectionnée pour ces tâches? –
Lorsque je vérifie 2 éléments sur la grille et que j'appuie sur la copie, les lignes sélectionnées doivent être clonées et ajoutées en dessous des lignes. Les lignes sélectionnées doivent être supprimées – Ravi