0

Tengo este filtrador general :

y cuando escribo algo para filtrar se agranda el tamaño del TD automáticamente.

el codigo js del filtrador es este :

  $(document).ready(function(){
          $("#myBuscador").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#grid tr").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
          });
        });  

No puedo modificar la clase del td para el tamaño ya que es global y modifica todos los demás td, ¿Cómo puedo solucionarlo?

HTML:

  <input class="form-control" id="myBuscador" type="text" placeholder="Buscar..">

    <div class="row" style="margin-top: 10px">
                    <div class="col-sm-12">
                      <table id="grid"></table>
                    </div>
                  </div>

Grid en jqgrid:

function InicializarLista() {
            $("#grid").jqGrid({
                url: '<%=Url.Action("GetList","VE_Propiedades") %>',
                datatype: "json",

                sortable: false,
                colNames: ['Id', 'Dirección', 'Ubicación','Cat Propiedad','Ambientes','Propietario','Operación','Precio','Estado'],
                colModel: [
                { name: 'ID', index: 'ID', width: 30, editable: false },
                { name: 'CALLE', index: 'CALLE', width: 170, editable: false },
                { name: 'LOCALIDAD', index: 'LOCALIDAD',align: 'center', width: 110, editable: false },
                { name: 'CAT_PROPIETARIO', index: 'CAT_PROPIETARIO',align: 'center', width: 100, editable: false },
                { name: 'AMBIENTES', index: 'AMBIENTES', width: 85,align: 'center', editable: false },
                {name: 'PROPIETARIO', index: 'PROPIETARIO', width: 200, editable: false },
                {name: 'OPERACION', index: 'OPERACION', width: 100,align: 'center', editable: false },
                 { name: 'PRECIO', index: 'PRECIO', width: 85,align: 'center', editable: false },
                {name: 'OBS_PRIVADAS', index: 'OBS_PRIVADAS', width: 230, editable: false },
                ],

                rowNum: 50,
                rowList: [10, 20, 30, 50, 100],
                pager: '#paginador',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                scroll: 1,
                width: 1200,
                height: 400,
                multiselect: false,
                shrinkToFit: false,
                editurl: editedRowUrl,

            });

El html del debbuger del navegador haciéndole click al elemento de una row de la grilla :

    <tr role="row" id="71" tabindex="0" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" style="display: table-row;" aria-selected="true">
<td role="gridcell" style="" title="71" aria-describedby="grid_ID">71</td>
<td role="gridcell" style="" title="rioja&nbsp;12" aria-describedby="grid_CALLE">rioja&nbsp;12</td>
<td role="gridcell" style="text-align:center;" title="" aria-describedby="grid_LOCALIDAD">&nbsp;</td>
<td role="gridcell" style="text-align:center;" title="PENSION" aria-describedby="grid_CAT_PROPIETARIO">PENSION</td>
<td role="gridcell" style="text-align:center;" title="" aria-describedby="grid_AMBIENTES">&nbsp;</td>
<td role="gridcell" style="" title="prop" aria-describedby="grid_PROPIETARIO">prop</td>
<td role="gridcell" style="text-align:center;" title="Alquiler" aria-describedby="grid_OPERACION">Alquiler</td>
<td role="gridcell" style="text-align:center;" title="1500" aria-describedby="grid_PRECIO">1500</td>
<td role="gridcell" style="" title="" aria-describedby="grid_OBS_PRIVADAS">&nbsp;</td></tr>
6
  • y porque no agregas otra clase, que deje fijo los tamaños el 28 feb. 2018 a las 12:42
  • 1
    ¡Hola Cristian! ¿Podrías compartir también tu HTML para comprobar la estructura?
    – Hechi
    el 28 feb. 2018 a las 12:48
  • Seria bueno que hagas lo que indica Hechi, ver tu codigo html y css que utilizas, ya que el problema radica ahí, que al momento de llamar a tu buscador en javascrip todo css se pierde, y tendrias que añadirlo el javascrip
    – Shassain
    el 28 feb. 2018 a las 13:15
  • En el HTML , EL BUSCADOR: <input class="form-control" id="myBuscador" type="text" placeholder="Buscar.."> Y LA GRID: <div class="row" style="margin-top: 10px"> <div class="col-sm-12"> <table id="grid"></table> </div> </div> el 28 feb. 2018 a las 13:29
  • les paso las clases "form-control" y "Row" ? o les comparto el html del debugger del navegador? el 28 feb. 2018 a las 13:31

1 respuesta 1

0

El problema es que jqGrid para implementar las tablas utiliza 2 tablas por separado, una para el header y otra para el body:

<table>
    <thead>
       <!-- columnas de header con informacion de ancho -->
    </thead>
</table>

<table>
    <tbody>
       <!-- filas y columnas de datos -->
    </tbody>
</table>

Por lo que todo la manipulacion que hagas en la segunda tabla (de datos) no esta en sintonia con lo que ocurre con el header de la otra.

Para mantener la armonia entre una y otra tabla, jqGrid utiliza una fila oculta en la primera fila de la segunda tabla, del estilo:

<tr class="jqgfirstrow" role="row" style="height:auto">
    <td role="gridcell" style="height:0px;width:61px;"></td>
    <td role="gridcell" style="height:0px;width:141px;"></td>
    <td role="gridcell" style="height:0px;width:95px;"></td>
</tr>

Por lo que para evitar que se rompan los estilos al manipular la segunda tabla, nunca debes tocar esa primera fila, excluyendola de tu selector:

$(document).ready(function(){
    $("#myBuscador").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#grid tr:not(:first-child)").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.