Tengo una tabla con datos de filas. Cada fila tiene una casilla de verificación que marcará esa fila para su procesamiento. La tabla se completa con la ayuda de DisplayTemplate, como se puede ver en el siguiente código. Cuando el usuario hace clic en el botón "Procesar", el código debe iterar la tabla y agregar todas las filas seleccionadas a una matriz que se enviará a un servicio web. Pensé que esto sería algo simple para encontrar un ejemplo, pero este no ha sido el caso.
Esta es la mesa:
<table id="hes" class="table-striped table-condensed table-bordered">
<thead>
<tr>
<th></th>
<th>Detail Id</th>
<th>Detail Reason Code</th>
<th>Detail Status Code</th>
</tr>
</thead>
<tbody>
@if (Model.HesViewModels != null)
{
@Html.DisplayFor(i => i.HesViewModels)
}
</tbody>
Estoy usando este código JQuery para obtener la fila seleccionada y no puedo averiguar cómo obtener la fila y sus valores correspondientes en una matriz.
$('#process').click(function () {
var x = $('#hes tr').find('input[type="checkbox"]:checked').each(function () {
// GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
});
});
EDITAR: así es como se ve la fuente renderizada para cada fila:
<tr>
<td><input data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" /></td>
<td>500116</td>
<td>0</td>
<td>1</td>
</tr>
$(function(){
$("#process").click(function(e){
e.preventDefault();
var idArray=[];
$("#hes").find('input[type="checkbox"]:checked').each(function (i,k) {
var item =$(this);
//Read the Id of the selected checkbox item.
idArray.push(item.attr("id"));
});
console.log(idArray);
//idArray is an array which has the Id of the checked checkboxes
//now you can send the idArray to your web service endpoint
});
});
Si desea obtener cualquier otro valor de atributo que no sea id
, puede reemplazar id la expresión item.attr("id")
con su nombre de atributo personalizado.
Aquí hay una muestra de jsbin funcional.
Editar: según los comentarios, desea enviar más datos. No es una buena idea enviar el marcado de la fila html tal como está (como mencionaste en el comentario). Es mejor obtener los datos requeridos que desea y enviarlos en un formato que el servicio web pueda comprender fácilmente. Tener un punto final de servicio web que acepte la cadena HTML y analice algunos datos es una mala idea.
Así que le sugiero que mantenga los datos que desea enviar, en atributos de datos HTML 5. Puede actualizar su código de afeitar como
<tbody>
@if (Model.HesViewModels != null)
{
foreach (var item in Model.HesViewModels)
{
<tr>
<td>
@Html.CheckBoxFor(s => item.Process,
new {data_detailid = item.DetailId,
data_reasoncode = item.DetailRasonCode})
</td>
<td>@item.DetailId</td>
<td>@item.DetailRasonCode</td>
</tr>
}
}
</tbody>
Esto representará los elementos de la casilla de verificación con 2 atributos de datos detailid
yreasoncode
Entonces, en nuestro código jQuery, solo necesitamos leer los valores de los atributos de datos de las casillas de verificación seleccionadas.
$(function () {
$("#yourProcessBtnId").click(function (e) {
e.preventDefault();
var itemsArray = [];
$("#hes").find('input[type="checkbox"]:checked').each(function (i, k) {
var item = $(this);
var row = { detailId:item.data("detailid"), reasonCode: item.data("reasoncode")}
itemsArray.push(row);
});
//you can send itemsArray now.
console.log(itemsArray);
});
});
itemsArray será una matriz de objetos con propiedades detailId
yreasonCode
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras