Как показывать отборную стоимость таблицы в модальном окне?
У меня есть таблица, где я размещаю несколько данных, оказанный из консультации SQL, для каждого реестра, который возвращает консультацию, я размещаю кнопку для того, чтобы он показал данные в form реестра, который я выбрал до сих пор, только могу возвращать единственную стоимость с этим кодом: как я могу возвращать остальную стоимость реестра, который я выбрал?
$('#modalSi').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data().id;
$(e.currentTarget).find('#txtNombre').val(id);
});
Это ссылка, с которой я открываю модальное окно, через признак data-id я перемещаю его стоимость пойдите, что он выбрал, может проходить больше стоимости
<a href="#" id="link1" data-id="row.id" data-toggle="modal" data-target="#modalSi"><button type="button" class="btn btn-success">Si </button></a>
И это HTML:
<!--modal-->
<div class="modal fade bs-example-modal-lg" id="modalSi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- body panel -->
<div id="panelNo" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Reporte de renovación </h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="lblNombre" class="control-label col-sm-2">Nombre</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" id="txtNombre" disabled>
</div>
</div>
<div class="form-group">
<label for="lblTelefono" class="control-label col-sm-2">Telefono</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</span>
<input type="text" class="form-control" id="txtTelefono" disabled>
</div>
</div>
<div class="form-group">
<label for="lblFechaa" class="control-label col-sm-2">Fecha Activación</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="txtFechaa" disabled>
</div>
</div>
<div class="form-group">
<label for="lbltipoTramite" class="control-label col-sm-2">Opciones</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-th-list"></span>
</span>
<select name="tipo" size="1" id="tipo" class="form-control">
<option value="">--Seleccionar--</option>
<option value="1">Buzón</option>
<option value="2">Fuera de servicio / número ha cambiado</option>
<option value="3">No contesta</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-10">
<input type="button" name="Submit" value="Guardar" id="btn-enviar" class="btn btn-success" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--modal-->
Считая, что соединение - внутри этикетки td и эта внутри этикетки tr, что он содержит оставшуюся часть ячеек с Вашей стоимостью: Я даю тебе подробный пример, как он получил бы всю стоимость линии
<table>
<tr>
<td>Columna 1 1</td>
<td>Columna 1 2</td>
<td><a href="#"><button>Get Fila</button></a></td>
</tr>
<tr>
<td>Columna 2 1</td>
<td>Columna 2 2</td>
<td><a href="#"><button>Get Fila</button></a></td>
</tr>
</table>
В твоем приложении как дела используя JQuery, в событии show.bs.modal, что usás, ты мог бы применять функцию parent () два раза.
var row= $(e.relatedTarget).parent().parent()
Это возвратило бы тебе линию, в которой находится соединение, на которое нажал пользователь. С JQuery podés получать все элементы, которые содержит эта линия, а именно, все Ваши ячейки (уровень 1) и контент этих (уровень 2).
Чтобы получать все элементы дети (в этом примере ячейки) линии возможно использовать функцию children () JQuery. Эта возвратит, в этом случае, array элементов td
Поездка элементов podés делать это с each
row.children().each(function () {
var celda= this;
//Con $(celda).text() obtendrías el contenido de la celda que es lo que buscás
});
Проблема этого - что в твоей проблеме necesitás связывать каждую ячейку с элементом формуляра. Конечно есть более элегантные альтернативы, но я буду выбирать простую версию: recorrés каждое положение array вручную
var celdas= row.children();
//$(celdas[0]).text() te daría el contenido de la primer celda de la fila
//$(celdas[1]).text() te daría el contenido de la segunda celda de la fila
//etc
Я вооружил маленький пример, он не включает bootstrap ни модального, ни формуляра. Но служи для того, чтобы увидеть, как получать линию и пробегать Ваши ячейки. Я надеюсь, что он подает тебя.
Соединение, чтобы видеть пример
Немного важно чтобы упоминать состоит в том, что я увидел другие ответы, и он советовал бы тебе, чтобы ты считал их. Я ограничился тем, чтобы решить это, на основании которого ты имел, не удаляясь слишком много от того, что ты делал, не соглашаясь рядом с сервером (.net) и не прибегая к другим книжным магазинам. Это функционировало бы и тебя решила бы твоя проблема быстро, но я советую тебе, чтобы ты считал в будущее другие способы решать ситуации как дела.
Я предпочел бы брать id и с ним приносить данные с сервера.
Удачи!
-
1если вот то, чего я требую, но entoces функция children, как он использовал бы ее, чтобы возвращать мою другую стоимость линии – Drago25 20.02.2016, 00:09
-
2funci и # 243; n будет возвращать тебя array, что в каждом posici и # 243; n он содержит одну из ячеек линии. Пробежав array, в каждый объект (ячейку) он ped и # 237; s Ваш контент. – ibooio 20.02.2016, 00:19
-
3оно было бы чем-либо подобным? var привет = $ (e.relatedTarget.hash) .parent () .parent (); for (var x in привет) {alert (привет [x] .children ());} – Drago25 20.02.2016, 00:40
-
4Сейчас я издаю ответ с более ясным примером – ibooio 20.02.2016, 00:55
-
5если пожалуйста, я тебе благодарен – Drago25 20.02.2016, 01:06
Выбор, который предлагает Леандро Тутини, мне кажется более подходящим, чем та пробегания с jQuery элементов HTML линии, которую ты издаешь.
Как я дополняю в Ваш ответ:
Чтобы наполнять данные о формуляре ты мог бы использовать plugin jQuery как jQuery-form-autofill, что облегчит тебе работу, и тебе удается считать что-то этим:
var params = new {
id: $(e.relatedTarget).data().id
};
$.ajax({
type: "POST",
url: "Pagina1.aspx/GetDatosReporte",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function( data ) {
// Rellenar los campos del formulario
$("#formId").autofill(data);
});
Чтобы сохранять изменения, реализованные в формуляре ты нуждался бы в другом WebMethod
<System.Web.Services.WebMethod()> _
Public Shared Function GuardaDatosReporte(ByVal data As ClassCustom)
'aqui te conectas a la db filtrando por el id
' guardas los datos de la entidad
End Function
И в кнопке сохранения ты мог бы использовать jQuery.serializeArray (), чтобы получать данные о формуляре и посылать их в сервер. Код был бы похожим на этот:
var params = $('#formId').serializeArray();
$.ajax({
type: "POST",
url: "Pagina1.aspx/GuardaDatosReporte",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function( data ) {
//TODO: Cerrar el formulario
})
.fail(function( jqXHR, textStatus ) {
//TODO: Mostrar error
});
С только id, которые ты получаешь таблицы, достигни и будь излишним мочь загружать popup. Ты был бы должен использовать с jquery и призывом ajax к серверу, чтобы возвращать данные и загружать контроль окна. Или же ты не берешь данных с html, но ты должный будешь быть в сервер искать их.
Кальинг АСП.НЕТ WebMethod using jQuery AJAX
Se он определяет один webmethod из стороны сервера
<System.Web.Services.WebMethod()> _
Public Shared Function GetDatosReporte(ByVal id As Integer) As ClassCustom
'aqui te conectas a la db filtrando por el id
' devuelves la lista con los datos de la entidad
End Function
Конечно ты должен определять класс со свойствами организации, которая издает popup
, Ты используешь jquery с $.ajax, чтобы призывать webmethod
var params = new {
id: $(e.relatedTarget).data().id
};
$.ajax({
type: "POST",
url: "Pagina1.aspx/GetDatosReporte",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
ответ ты использовал бы ее, чтобы распределять контроль используя jquery