У меня есть таблица, в которой я помещаю различные данные, полученные в результате SQL-запроса, для каждой записи, которую возвращает запрос, я помещаю кнопку, чтобы показать данные в форме записи, которую я выбрал до сих пор. Я могу получить только одно значение с этим код, как я могу получить другие значения реестра, которые я выбрал?
$('#modalSi').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data().id;
$(e.currentTarget).find('#txtNombre').val(id);
});
Это ссылка, по которой я открываю модальное окно, через атрибут data-id
я передаю значение 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 , который содержит остальные ячейки с их значениями: я привожу вам подробный пример того, как вы получите все значения строки
В вашем приложении, когда вы используете JQuery, в используемом вами событии show.bs.modal вы можете дважды применить функцию parent() .
Это вернет строку, в которой находится ссылка, по которой щелкнул пользователь. С помощью JQuery вы можете получить все элементы, содержащиеся в этой строке, то есть все ее ячейки (уровень 1) и их содержимое (уровень 2).
Чтобы получить все дочерние элементы (ячейки в этом примере) строки, вы можете использовать функцию JQuery Children () . В этом случае он вернет массив элементов td
Вы можете сделать путь элементов с каждым
});
Проблема в том, что в вашей задаче вам нужно связать каждую ячейку с элементом формы. Наверняка есть более элегантные альтернативы, но я выберу простой вариант: вы просматриваете каждую позицию массива вручную.
Я собрал небольшой пример, он не включает бутстрап, модальное окно или форму. Но полезно посмотреть, как получить строку и пройтись по ее ячейкам. Я надеюсь, что это поможет вам.
Ссылка для просмотра примера
Важно отметить, что я видел другие ответы и посоветовал бы вам рассмотреть их. Я ограничился ее решением на основе того, что у вас было, не уходя слишком далеко от того, что вы делали, не обращаясь к серверной части (.net) и не прибегая к другим библиотекам. Это сработает и быстро решит вашу проблему, но я советую вам рассмотреть другие способы решения подобных ситуаций в будущем.
Я бы предпочел взять идентификатор и с его помощью получить данные с сервера.
Удача!
Вариант, предложенный Леандро Тутини , кажется мне более подходящим, чем просмотр HTML-элементов строки, которую вы редактируете, с помощью jQuery.
В дополнение к вашему ответу:
Чтобы заполнить данные формы, вы можете использовать плагин jQuery, такой как jQuery-form-autofill , который облегчит вашу работу и в итоге получится что-то вроде этого:
Чтобы сохранить изменения, внесенные в форму, вам понадобится другой WebMethod
И на кнопке сохранения вы можете использовать jQuery.serializeArray() , чтобы получить данные формы и отправить их на сервер. Код будет похож на этот:
Только того, что
id
вы получаете из таблицы, достаточно, чтобы загрузить всплывающее окно. Вы должны использовать withjquery
иajax
вызов сервера для получения данных и загрузки элементов управления окна. То есть вы не берете данные из html, а должны идти на сервер, чтобы их искать.Вызов ASP.Net WebMethod с использованием jQuery AJAX
webmethod
Серверная часть определенаКонечно, вы должны определить класс со свойствами объекта, который редактирует всплывающее окно.
jquery
Вы будете использовать with$.ajax
для вызова веб- методавы бы использовали ответ, чтобы назначить элементы управления с помощью jquery