Изменить значок сворачивания в jqGrid

#jquery #css #twitter-bootstrap #jqgrid

Вопрос:

Мы используем jqGrid версии 4.6

Мы хотим изменить значок свертывания. Итак, приведенный ниже код выполняет эту работу

 $(".ui-icon-circlesmall-plus")
          .removeClass("ui-icon-circlesmall-plus")
          .addClass("ui-icon-arrowstop-1-s");

Куда я должен поместить этот код?

Я поместил это в gridComplete виде

 gridComplete: function(){

      $(".ui-icon-circlesmall-plus")
          .removeClass("ui-icon-circlesmall-plus")
          .addClass("ui-icon-arrowstop-1-s");

}

но не работает, однако при добавлении тайм-аута код работает нормально:

 gridComplete: function(){
              setTimeout( function(){
              (".ui-icon-circlesmall-plus")
                .removeClass("ui-icon-circlesmall-plus")
                .addClass("ui-icon-arrowstop-1-s");}, 1000);
        },

Пример на https://jsfiddle.net/jbb9173b , Если убрать время ожидания, значок не изменится!

Зачем мне нужен тайм-аут?! Я запускаю неправильное событие? Я имею в виду, есть ли другое событие, которое могло бы устранить необходимость в функции тайм-аута?

Есть ли способ лучше?

1. Вы всегда должны указывать, какую версию jqGrid вы используете (можете использовать) и из какого fok jqGrid. Я не могу помочь вам с Guriddo jqGrid JS. Бесплатный jqGrid также поддерживает Bootstrap (смотрите, например, Здесь ) с помощью значков Bootstrap (глиф) или Font Awesome. Можно легко настроить любой значок, но вы должны четко указать, что вам нужно. Нет общего «значка свертывания». Используете ли вы древовидную сетку, подсетку или группировку данных?

2. Уважаемый Олег, я обновил свой ответ также с помощью jsfiddle (спасибо за ссылку для начальной загрузки :))

Ответ №1:

Можно использовать minusicon и plusicon свойства groupingView , чтобы указать значки, используемые для группировки данных. Например

 groupingView: {
    minusicon: "ui-icon-arrowstop-1-n", // "ui-icon-circlesmall-minus"
    plusicon: "ui-icon-arrowstop-1-s",  // "ui-icon-circlesmall-plus"
    groupField: ["ProductName"],
    groupCollapse: true
}

с результатами, как на картинке ниже

посмотрите модифицированную демонстрацию https://jsfiddle.net/OlegKi/jbb9173b/2

Я все еще рекомендую вам использовать бесплатный форк jqGrid вместо старого jqGrid 4.6, который уже мертв. Он имеет абсолютно новую систему значков с полной настройкой (см. Статью в вики), где значки могут быть не только значками jQuery UI, но и значками символов Bootstrap, значками Font Awesome или любыми другими. Все настройки по умолчанию можно увидеть здесь. Можно использовать iconSet опцию (например, iconSet: "fontAwesome" , iconSet: "glyph" или набор значков по умолчанию: «jQueryUI»), чтобы указать набор значков, который вы предпочитаете использовать. Вы должны просто включить соответствующий CSS вместе со значками ( font-awesome.min.css или bootstrap.min.css ). Можно легко изменить любой значок из существующего набора значков и определить таким образом новый пользовательский набор. Например, можно определить

 $.jgrid.icons.customjQueryUI = {
    baseIconSet: "jQueryUI",
    grouping: {
        plus: "ui-icon-arrowstop-1-s", //"ui-icon-circlesmall-plus"
        minus: "ui-icon-arrowstop-1-n" //"ui-icon-circlesmall-minus"
    }
};

и использовать iconSet: "customjQueryUI" опцию. Посмотрите модифицированную демонстрацию https://jsfiddle.net/OlegKi/jbb9173b/3 /, в котором используется jqGrid 4.13.4.

Можно использовать только значки-глифы Bootstrap:

 $.jgrid.icons.customGlyph = {
    baseIconSet: "glyph",
    grouping: {
        plus: "glyphicon-save", //"glyphicon-expand"
        minus: "glyphicon-open" //"glyphicon-collapse-down"
    }
};

Смотрите https://jsfiddle.net/OlegKi/jbb9173b/5 /, который отображает