我有一个表,我在其中放置 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元素数组
您可以使用each来完成元素的路径
});
这样做的问题是,在您的问题中,您需要将每个单元格与表单的一个元素相关联。当然还有更优雅的选择,但我会选择简单的版本:你手动遍历数组的每个位置
我放了一个小例子,它不包括引导程序或模态或表单。但是了解如何获取行并遍历其单元格很有用。我希望它对你有帮助。
链接以查看示例
需要提及的重要一点是,我已经看到了其他答案,并建议您考虑一下。我限制自己根据你所拥有的来解决它,而不会偏离你正在做的事情太远,没有访问服务器端(.net),也没有求助于其他库。这将有效并快速解决您的问题,但我建议您在未来考虑其他解决此类情况的方法。
我会选择获取 id 并使用它从服务器获取数据。
运气!
Leandro Tutini提出的选项对我来说似乎比浏览您正在使用 jQuery 编辑的行的 HTML 元素更合适。
作为您答案的补充:
要填写表单数据,您可以使用jQuery-form-autofill 之类的 jQuery 插件,这将使您的工作更轻松,并最终得到如下内容:
要保存对表单所做的更改,您需要另一个 WebMethod
在保存按钮上,您可以使用jQuery.serializeArray()获取表单数据并将其发送到服务器。代码将与此类似:
仅使用
id
从表中获得的一个就足以加载弹出窗口。您应该使用 withjquery
和ajax
服务器调用来检索数据并加载窗口控件。也就是你不是从html中取数据,而是必须到服务器去查找。使用 jQuery AJAX 调用 ASP.Net WebMethod
定义了一个
webmethod
服务器端当然,您必须使用编辑弹出窗口的实体的属性来定义类
jquery
您将使用with$.ajax
来调用web 方法您将使用答案使用 jquery 分配控件