javascript - bootstrap - Cambiar estilo de jqGrid

jquery css themes

Question

Estoy usando jqGrid 3.5. ¿Puedo cambiar el estilo y el aspecto de la cuadrícula y hacer que sea más hermoso usando jQuery o CSS personalizado o algo más?

Answer 1

Estoy seguro de que puedes

Tienes dos opciones:

Puedes modificar el CSS de la grilla. Esto es útil si hay que hacer pequeñas modificaciones en el diseño. Las modificaciones principales no deben hacerse de esta manera porque las clases de CSS de JQGrid realmente dependen unas de otras.

O puedes eliminar todo el estilo del HTML y reemplazarlo por el tuyo.

Por ejemplo, tienes un JQGrid como:

HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div>

jQuery

jQuery("#list2").jqGrid({ url:''server.php?q=2'', 
 datatype: "json", 
 colNames:[''Inv No'',''Date''],
 colModel:[ {name:''id'',index:''id'', width:55},{name:''invdate'',index:''invdate'',width:90}],
 rowNum:10, 
 rowList:[10,20,30],
 pager: jQuery(''#pager2''), 
 sortname: ''id'', 
 viewrecords: true, 
 caption:"JSON Example" }).navGrid(''#pager2'',{edit:false,add:false,del:false}); 

Esto generará HTML como abajo:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>

Eliminar todas las clases de CSS:

JQuery("#list2").removeClass(".ui-jqgrid-titlebar");

etc.

Después de crear sus propias clases, puede agregar a la estructura HTML con:

JQuery("#list2").addClass(".YourClass");

Sugiero utilizar ambas técnicas.

Answer 2

He modificado el css de jQGrid de una manera nueva, que también será compatible con el diseño de bootastrap. Necesitas lo siguiente para configurar este jQGrid

1) Fuente impresionante estilo

2) último paquete jQGrid

Nuevo jQGrid diseñado se verá como debajo de la imagen

Se incluye la nueva codificación completa de CSS y javascripts http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html aquí.

Answer 3

Necesitaría cambiar el encabezado de la cuadrícula (sobre la marcha).

Este es mi codigo

El HTML:

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div>

El jqGrid:

    jQuery("#jqgrid_ctrs").jqGrid({
        url:''php-modules/controllers_data.php?ctrtype=LED'',
        datatype: "json",
        width:500,
        height:"auto",
        colNames:[''CtrName'',''Type'', ''Description'', ''Location''],
        colModel:[
           {name:''CtrName'',index:''CTRNAME'', width:70, editable:false},
           {name:''Type'',index:''CTRTYPE'', width:70, editable:false},
           {name:''Description'',index:''CTRDESCR'', width:250, editable:false},
           {name:''Location'',index:''CTRLOCATION'', width:70, editable:false}
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery(''#jqgrid_ctrs_pager''),
        sortname: ''CtrName'',
        viewrecords: true,
        sortorder: ''desc'',
        caption:''System Controllers'',

    }).navGrid(''#jqgrid_ctrs_pager'',
                {search:true,edit:false,add:false,del:false}
              );

Para entender en qué objeto tengo que trabajar, inspeccionemos el código HTML generado por el código JavaScript:

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;">
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div>
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;">

...

Ahora, el único div con una ID especificada es <div id = "gview_jqgrid_ctrs" ...

Es por eso que lo siguiente NO FUNCIONA.

jQuery("#jqgrid_ctrs").removeClass(''.ui-widget-header'');
jQuery("#jqgrid_ctrs").addClass(''.jqgrid-header'');

Tuve que seleccionar el div principal y "buscar en" el encabezado div, habiendo especificado la clase "ui-jqgrid-titlebar". Luego quité la clase original "ui-widget-header" y la reemplacé con mi propia clase.

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass(''ui-widget-header'');
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass(''jqgrid-header'');

Donde .jqgrid-header es un estilo definido de esta manera.

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%;
    border:1px solid #4297D7;
    color:#FF0000;
    font-weight:bold;
  }

He probado esto y funciona. Espero que esto sea útil ...

Answer 4

Para elaborar sobre lo que dice Justin Ethier ...

Dado que jqGrid usa temas de Jquery-UI, la mejor manera de cambiar la apariencia de la cuadrícula sería crear un here personalizado.

Le recomendaría encarecidamente que vea si eso funciona para usted antes de intentar modificar el css después del hecho ... aunque también puede hacerlo, si el aspecto del tema jquery-ui es demasiado limitado para usted.

Answer 5

Puedes eliminar todas las clases de ui-grid:

$("[class^=''ui-jqgrid'']").removeAttr(''class'');

Esto puede tener problemas de rendimiento si el tamaño de su cuadrícula es grande.

Answer 6

Una de las grandes características de jqGrid 3.5 es la integración con jQuery UI Themes. Puedes construir y / o seleccionar un tema desde here . Luego simplemente agregue una referencia a ella en su página:

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>

Esto te dará una cuadrícula que se ve muy bien, con un mínimo de esfuerzo.

¿Resuelve eso su problema o necesita revisar aún más la apariencia de la cuadrícula?

Answer 7

/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
    $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
    $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
    $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
    $(".ui-jqgrid-pager").removeClass("ui-state-default");
}