Lo que puedo decir es que todo esto hace lo siguiente:
- Agrega una fila nueva a una tabla en la parte final.
- Elimina la fila a la cual haga clic en la x.
- Modifica el orden de los registros de la tabla.
Y aquí esta el código:
<!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 runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.areiniciar, .areiniciar:link, .areiniciar:visited
{
text-decoration: none;
cursor:pointer;
font-weight: bold;
}
.areiniciar:hover, .areiniciar:focus
{
text-decoration: underline;
cursor:pointer;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField runat="server" ID="hfvalores" />
<table id="tblpso">
<tr>
<td colspan="3">
<a class="fila_aagregar" href="#" >+ Agregar Fila</a>
</td>
</tr>
<tr>
<td>
orden
</td>
<td>
valor
</td>
<td>
change ord
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
//Eventos, se debe dejar con el
//Eventos, se debe dejar con el
$(document).on('click', '.fila_aagregar', function() {
//$(".fila_aagregar").on('click', function () {
agregarFila('','');//si es nueva la fila, el valor de la caja de texto es vacio
});
$(document).on('click', '.fila_aeliminar', function() {
//$(".fila_aeliminar").on('click', function () {
eliminarFila($(this));
});
$(document).on('click', '.fila_asubir', function() {
//$(".fila_asubir").on('click', function () {
var idfila = $(this).parent().parent().find('.spanid').html();
cambiarOrden('subir', idfila);
});
$(document).on('click', '.fila_abajar', function() {
//$(".fila_abajar").on('click', function () {
var idfila = $(this).parent().parent().find('.spanid').html();
cambiarOrden('bajar', idfila);
});
//Funciones
function cambiarOrden(subirobajar, identificadorfila) {
var auxidentificador;
if (subirobajar == 'subir') {
auxidentificador = Number(identificadorfila) + 1;
}
else {
identificadorfila = Number(identificadorfila) + 2;
auxidentificador = Number(identificadorfila) - 1;
}
//obtener valores para ser cruzados entre filas
var nombresuperior = $('#tblpso tr').eq(identificadorfila).find('.tdvalor .inombreobjeto').val();
var idsuperior = $('#tblpso tr').eq(identificadorfila).find('.tdvalor .hfidobjeto').val();
var nombreactual = $('#tblpso tr').eq(auxidentificador).find('.tdvalor .inombreobjeto').val();
var idactual = $('#tblpso tr').eq(auxidentificador).find('.tdvalor .hfidobjeto').val();
//fila superior
$('#tblpso tr').eq(identificadorfila).find('.tdvalor .inombreobjeto').val(nombreactual);
$('#tblpso tr').eq(identificadorfila).find('.tdvalor .hfidobjeto').val(idactual);
//fila a subir
$('#tblpso tr').eq(auxidentificador).find('.tdvalor .inombreobjeto').val(nombresuperior);
$('#tblpso tr').eq(auxidentificador).find('.tdvalor .hfidobjeto').val(idsuperior);
}
function agregarFila(newid, newnombre) {
var numeroFilasActuales = obtenerFilasActuales();
var FilaPersonaSocioDemograficoOtro = '<tr> <td class="tdorden"> <span class="spanid">$idfila$</span> </td> <td class="tdvalor"> <input type="hidden" class="hfidobjeto" value="$idobjeto$" /><input type="text" name="valor" value="$nombre$" class="inombreobjeto" /> </td> <td class="tdaccion"> <a class="fila_asubir areiniciar" href="#" >▲</a> <a class="fila_abajar areiniciar" href="#" onclick="">▼</a> <a class="fila_aeliminar areiniciar" href="#" onclick="">X</a> </td> </tr>';
FilaPersonaSocioDemograficoOtro = FilaPersonaSocioDemograficoOtro.replace("$idfila$", numeroFilasActuales + 1);
FilaPersonaSocioDemograficoOtro = FilaPersonaSocioDemograficoOtro.replace("$idobjeto$", newid);
FilaPersonaSocioDemograficoOtro = FilaPersonaSocioDemograficoOtro.replace("$nombre$", newnombre);
$('#tblpso tbody>tr:last').after(FilaPersonaSocioDemograficoOtro);
ocultarBotonesSubirBajarPrimeraYUltimaFila();
}
function eliminarFila(objectlink) {
//si solo queda una fila no se permite eliminar la fila, se deja valor en 0
if (1 == obtenerFilasActuales()) {
$('#tblpso .tdvalor .inombreobjeto').val('');
}
else {
objectlink.closest("tr").remove();
reordenarFilas();
}
ocultarBotonesSubirBajarPrimeraYUltimaFila();
}
function obtenerValorDeSelectorSegunIdFila() {
//
}
function reordenarFilas() {
var auxIndiceFilas = 0;
$('#tblpso tr').each(function () {
if ($(this).find('.spanid').length > 0) {
auxIndiceFilas++;
$(this).find('.spanid').html(auxIndiceFilas);
}
})
}
function obtenerFilasActuales() {
return $('#tblpso').find('.spanid').length;
}
function ocultarBotonesSubirBajarPrimeraYUltimaFila() {
var auxIndiceFilas = 0;
$('#tblpso tr').each(function () {
if ($(this).find('.spanid').length > 0) {
auxIndiceFilas++;
$(this).find('.fila_asubir').css('visibility', 'visible');
$(this).find('.fila_abajar').css('visibility', 'visible');
if (auxIndiceFilas == 1) {//primera fila, deshabilitar subir
$(this).find('.fila_asubir').css('visibility', 'hidden');
}
if (auxIndiceFilas == obtenerFilasActuales()) {//ultima fila, deshabilitar bajar
$(this).find('.fila_abajar').css('visibility', 'hidden');
}
}
})
}
//inicializar cuw
function loadCUW(csvids, csvtextos) {
//colocar ids en hiddenfield
$('#hfvalores').val(csvids);
//crear filas segun el numero de ids y asignar sus nombres
var splitnombres = csvtextos.split('|');
var splitids = csvids.split('|');
for (indicenombre = 0; indicenombre < splitnombres.length; indicenombre++) {
agregarFila(splitids[indicenombre], splitnombres[indicenombre]);
}
}
var auxcsvids = '10|22|13|24|25|26';
var auxcsvtexto = "Este un valor|Otro valor mas|Otro valor mas2|Otro valor mas3|Otro valor mas4|Otro valor mas5";
loadCUW(auxcsvids, auxcsvtexto);
</script>
</form>
</body>
</html>
Ojo que ahora desde 1.9 de jquery ya no es live() sino on().
Sean felices! :) Y sientanse libres de opinar ;)
No hay comentarios:
Publicar un comentario