Стиль изменения jqGrid

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

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

Вы можете изменить 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");

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

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

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

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

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

Чтобы подробнее рассказать о том, что говорит Джастин Этье ...

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

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

Технически все, что может быть реализовано с наследованием, также может быть реализовано с делегированием. Так что ответ будет «нет.»

Преобразование наследования в делегирование

Предположим, что следующие классы реализованы с наследованием:

public class A {
    String a = "A";
    void doSomething() { .... }
    void getDisplayName() {  return a }
    void printName { System.out.println( this.getDisplayName() };   
}

public class B extends A {
    String b = "B";
    void getDisplayName() {  return a + " " + b; }
    void doSomething() { super.doSomething() ; ... }    
}

Материал работает хорошо, и вызов printName на экземпляре B напечатает «A B» в консоли.

Теперь, если переписать это с делегированием, мы получим:

public class A {
    String a = "A";
    void doSomething() { .... }
    void getDisplayName() {  return a }
    void printName { System.out.println( this.getName() };  
}

public class B  {
    String b = "B";
    A delegate = new A();
    void getDisplayName() {  return delegate.a + " " + b; }
    void doSomething() { delegate.doSomething() ; ... } 
    void printName() { delegate.printName() ; ... }
}

Нам нужно определить printName в B, а также создать делегат при создании экземпляра B. Вызов doSomething будет работать в том же пути, что и при наследовании. Но при вызове printName в консоли будет напечатано «A» . Действительно, при делегировании мы потеряли мощное понятие «это», связанное с экземпляром объекта, и базовые методы, способные вызывать методы, которые должны быть переопределены.

Это можно решить на языке, поддерживающем чистое делегирование. При чистом делегировании «this» в делегате по-прежнему будет ссылаться на экземпляр B. Это означает, что this.getName () запускает отправку метода из класса B. Мы достигаем того же, что и при наследовании. Это механизм, используемый в языке на основе прототипа , например Self , в котором имеется встроенная функция делегирования (вы можете прочитать здесь , как наследование работает в Self).

Но Java не имеет чистого делегирования. Когда тогда застрял? Нет, на самом деле, мы все еще можем сделать это сами, приложив больше усилий:

public class A implements AInterface {
    String a = "A";
    AInterface owner; // replace "this"
    A ( AInterface o ) { owner = o }
    void doSomething() { .... }
    void getDisplayName() {  return a }
    void printName { System.out.println( owner.getName() }; 
}

public class B  implements AInterface {
    String b = "B";
    A delegate = new A( this );
    void getDisplayName() {  return delegate.a + " " + b; }
    void doSomething() { delegate.doSomething() ; ... } 
    void printName() { delegate.printName() ; ... }
}

Мы в основном пересматриваем то, что обеспечивает встроенное наследство. Имеет ли это смысл? На самом деле нет. Но это показывает, что наследование всегда может быть преобразовано в делегирование.

Обсуждение

Наследование характеризуется тем, что базовый класс может вызывать метод, переопределенный в подклассе. Это, например, суть образца . Такие вещи нелегко сделать с делегированием полномочий. С другой стороны, именно это затрудняет использование наследства. Это требует умственного поворота, чтобы понять, где происходит полиморфная отправка и каков эффект, если методы переопределены.

Существуют некоторые известные подводные камни в отношении наследования и хрупкости , которую оно может внести в конструкцию. Особенно если иерархия классов развивается. Также могут возникнуть некоторые проблемы с равенством в hashCode и равным , если используется наследование. Но с другой стороны, это все еще очень элегантный способ решения некоторых проблем.

Кроме того, даже если наследование может быть заменено делегированием, можно утверждать, что они все еще достигают разных целей и дополняют друг друга -- они не передают одно и то же намерение , которое не улавливается чистой технической эквивалентностью.

(Моя теория состоит в том, что когда кто-то начинает делать ОО, у нас возникает соблазн чрезмерного использования наследования, потому что оно воспринимается как особенность языка.Затем мы учимся делегированию, которое является образцом/подходом, и мы учимся ему также нравиться. Через некоторое время мы находим баланс между тем и другим и развиваем чувство интуиции которого лучше в случае чего. Ну, как вы видите, мне все еще нравятся оба, и оба заслуживают некоторой осторожности, прежде чем быть представленным.)

Некоторая литература

• Делегирование является наследованием

Наследование и делегирование являются альтернативные методы для инкрементного определение и совместное использование. Имеет обычно считалось, что делегирование обеспечивает более мощную модель. Это документ демонстрирует, что существует «естественная» модель наследования, которая захватывает все свойства делегирование. Независимо, определенные ограничения на способность делегирование для захвата наследования: продемонстрировано. Наконец, новые рамки который полностью фиксирует оба делегирования и наследство обрисовано, и некоторые последствий этого гибрида исследуются модели.

• О понятии наследования

Один из самых интригующих - и на в то же время наиболее проблематично - понятия в объектно-ориентированное программирование наследование. Наследование обычно рассматривается как признак, который различает объектно-ориентированный программирование из других современных парадигмы программирования, но исследователи редко соглашаются с его значением и использованием. [...]

• Систематический рефакторинг наследования для делегирования на java

Из-за сильной связи классов и вызванного распространения ненужных членов класса по наследству предложение использовать вместо этого состав и делегирование стало обычным делом. Представление соответствующего рефакторинга в литературе может привести к мысли, что такая трансформация является простой задачей. [...]

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

Это мой код

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

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