Изменить стиль jqGrid

Question

Я использую jqGrid 3.5. Могу ли я изменить стиль и внешний вид сетки и сделать ее более красивой, используя jQuery или собственный CSS или что-то еще?

Answer 1

Одной из главных особенностей jqGrid 3.5 является интеграция с темами jQuery UI. Вы можете создать и / или выбрать тему из здесь . Тогда просто добавьте ссылку на него на своей странице:

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

Это даст вам сетку, которая выглядит очень хорошо, с минимумом усилий.

Решает ли это вашу проблему или вам нужно еще больше пересмотреть внешний вид сетки?

Answer 2

Вам нужно будет изменить заголовок сетки (на лету).

Это мой код

HTML:

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

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}
              );

Чтобы понять, с каким объектом мне нужно работать, давайте проверим HTML-код, сгенерированный кодом 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;">

...

Теперь единственным div с указанным идентификатором является

Вот почему следующее НЕ РАБОТАЕТ.

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

Мне пришлось выбрать родительский div и "искать в" заголовочный div, указав класс "ui-jqgrid-titlebar". Затем я удалил исходный класс "ui-widget-header" и заменил его своим собственным классом.

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

Где .jqgrid-header - стиль, определенный таким образом.

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

Я проверял это и работает. Надеюсь, это будет полезно ...

Answer 3

Чтобы уточнить, что говорит Джастин Этье ...

Поскольку jqGrid использует темы Jquery-UI, лучшим способом изменить внешний вид сетки будет создание пользовательской темы .

Я настоятельно рекомендую вам убедиться, что это работает для вас, прежде чем пытаться изменить css после факта ... хотя вы можете сделать это также, если внешний вид темы jquery-ui слишком ограничивает вас.

Answer 4

Я уверен, что вы можете.

У вас есть два варианта:

Вы можете изменить CSS сетки. Это полезно, если приходится вносить небольшие изменения в дизайн. Основные изменения не должны выполняться таким образом, потому что классы CSS JQGrid действительно зависят друг от друга.

Или вы можете удалить весь стиль из HTML и заменить его своим собственным.

Например, у вас есть JQGrid вроде:

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}); 

Это сгенерирует HTML, как показано ниже:

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

..

</div>

Удалить все классы CSS:

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

и т.д.

После того, как вы создали свои собственные классы, вы можете добавить в структуру HTML:

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

Я предлагаю использовать оба метода.

Answer 5

Я изменил CSS jQGrid по-новому, который также будет поддерживать дизайн bootastrap. Для настройки этого jQGrid

необходимы следующие вещи

1) Font Awesome Style

2) jQGrid Последняя версия

Новый дизайн jQGrid будет выглядеть как на картинке ниже

Новое полное CSS и полное кодирование javascripts включено http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html здесь.

Answer 6

/* 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");
}

Answer 7

Вы можете удалить все классы пользовательского интерфейса:

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

Это может иметь проблемы с производительностью, если размер вашей сетки большой.