3

Deseo aplicar estilo a los headers de jqgrid de la siguiente manera: estilos_Actuales

Como se ve actualmente si se aplican los estilos de color verde y letras blancas, el problema es que se aplica a todos los headers tengan o no contenido, como podria solo aplicar a los headers que contengan texto o contenido, el codigo que aplico es el siguiente:

  .ui-th-div {

    display: inline-block;
    background-color:#00a65a !important;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;

}

Declaracion Jqgrid:

     <div style="widows: 100px; overflow:auto;">
        <table id="gridOrdenesPedido"></table>
      </div>
      <div id="pagerOrdenesPedido" style="color:black"></div>

Como es de conocimiento Jqgrid se encarga de crear automaticamente toda la estructura de la grilla referencia:

Jqgrid Ejemplo

6
  • ¿Puedes poner tu HTML?
    – Kiko_L
    Commented el 11 ene. 2019 a las 21:03
  • debido a que Jqgrid crea toda la estructura es complejo agregar el html, pero agregue como declaro la grilla Commented el 11 ene. 2019 a las 21:07
  • font-family? podria ser?
    – Alien69
    Commented el 12 ene. 2019 a las 23:46
  • Si no me falla, no hay manera de que con puro CSS se sepa si un tag "th" tiene o no contenido. En este caso, lo que hay que hacer es que con JS recorrer cada th de la tabla en cuestión y, si este no está vacío, entonces agregar una clase con el estilo o agregar directamente el style al elemento <th>.
    – eduardo a
    Commented el 14 ene. 2019 a las 21:38
  • ¿Podrías poner la referencia al CSS? En la versión que yo manejo no veo que exista ya la clase ui-th-div
    – Kiko_L
    Commented el 15 ene. 2019 a las 14:31

1 respuesta 1

6
+50

Creo que lo más sencillo es utilizar javascript. Una vez creado tu jqgrid, recorres los elementos con clase .ui-jqgrid-sortable (son cada uno de los div de tus headers) y si el el texto contenido es vacío añadimos la clase ui-th-div a dicho elemento ($(this).text().trim() !== "")

$(".ui-jqgrid-sortable").each(function() { 
      if($(this).text().trim() !== ""){
        $(this).addClass("ui-th-div");          
      }
  });

$(document).ready(function () {
            $("#jqGrid").jqGrid({
                datatype: "local",
				data: mydata,
                height: 250,
				width: 780,
                colModel: [
                    { label: ' ', name: 'id', width: 75, title:false },
                    { label: ' ', name: 'col1', width: 75,title:false },
                    { label: 'Date', name: 'invdate', width: 90 },
                    { label: 'Client', name: 'name', width: 100 },
                    { label: 'Amount', name: 'amount', width: 80 },
                    { label: 'Tax', name: 'tax', width: 80 },
                    { label: 'Total', name: 'total', width: 80 },
                    { label: 'Notes', name: 'note', width: 150 }
                ],
                viewrecords: true, // show the current page, data rang and total records on the toolbar
                caption: "Load jqGrid through Javascript Array",
            });    

      $(".ui-jqgrid-sortable").each(function() { 
          if($(this).text().trim() !== ""){
            $(this).addClass("ui-th-div");          
          }
      });

    });
.ui-th-div {
    display: inline-block;
    background-color:#00a65a !important;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
}
<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - JSON</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 

        var mydata = [
               { id: "1", col1:"+", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "2", col1:"+", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "3", col1:"+", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
               { id: "4", col1:"+", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "5", col1:"+", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "6", col1:"+", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
               { id: "7", col1:"+", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "8", col1:"+", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "9", col1:"+", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];

    
        
    </script>

    
</body>
</html>

También podrías añadir un índice i al each() y seleccionar las columnas a las que quieres aplicar el estilo:

$(document).ready(function () {
            $("#jqGrid").jqGrid({
                datatype: "local",
				data: mydata,
                height: 250,
				width: 780,
                colModel: [
                    { label: ' ', name: 'id', width: 75, title:false },
                    { label: ' ', name: 'col1', width: 75,title:false },
                    { label: 'Date', name: 'invdate', width: 90 },
                    { label: 'Client', name: 'name', width: 100 },
                    { label: 'Amount', name: 'amount', width: 80 },
                    { label: 'Tax', name: 'tax', width: 80 },
                    { label: 'Total', name: 'total', width: 80 },
                    { label: 'Notes', name: 'note', width: 150 }
                ],
                viewrecords: true, // show the current page, data rang and total records on the toolbar
                caption: "Load jqGrid through Javascript Array",
            });    

      $(".ui-jqgrid-sortable").each(function(i) { 
          //Aplicamos el estilo a las columnas distintas de 0, 1 y 4
          if(i>1 && i!==4){
            $(this).addClass("ui-th-div");          
          }
      });

    });
.ui-th-div {
    display: inline-block;
    background-color:#00a65a !important;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
}
<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - JSON</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 

        var mydata = [
               { id: "1", col1:"+", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "2", col1:"+", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "3", col1:"+", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
               { id: "4", col1:"+", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "5", col1:"+", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "6", col1:"+", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
               { id: "7", col1:"+", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
               { id: "8", col1:"+", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
               { id: "9", col1:"+", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];

    
        
    </script>

    
</body>
</html>

1
  • muchas gracias sin duda una excelente explicacion y gran respuesta...!! Commented el 15 ene. 2019 a las 16:02

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.