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

Ответ 1

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

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

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

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

Ответ 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 с указанным идентификатором является < div id = "gview_jqgrid_ctrs"...

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

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-заголовок - это стиль, определенный таким образом.

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

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

Ответ 3

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

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

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

Или вы можете удалить все стили из 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");

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Я изменил css jQGrid по-новому, что также поддержит дизайн bootastrap. Для настройки jQGrid

1) Шрифт Awesome Style

2) jQGrid Последний пакет

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

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

Ответ 7

Вы можете удалить все классы ui-grid:

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

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