JqGrid заставляет выбранные строки и Hovering не следовать цветовой схеме альтернативной строки

Как мне сделать так, чтобы зависшие и выбранные строки (цвет текста и цвет фона) не соответствовали схеме альтернативных строк?

Вот моя обычная сетка (с проблемой цвета текста)

И я также хотел бы пойти от этого:

К этому :

Вот моя HTML-страница с кодом JS, я использую стандартную тему аккордеона с локальными данными.

{% load static %}
<!DOCTYPE html>
<html lang = "en">

<head>
<meta content = "text/html; charset=utf-8" />

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type = "text/ecmascript" src = "{% static 'js/jquery.min.js'%}"></script>
    <!-- Language set We support more than 40 localizations -->
    <script type = "text/ecmascript" src = "{% static 'js/trirand/i18n/grid.locale-en.js'%}"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type = "text/ecmascript" src = "{% static 'js/trirand/jquery.jqGrid.min.js'%}"></script>

    <link type = "text/css" rel = "stylesheet"  media = "screen" href = "{% static 'css/trirand/ui.jqgrid.css'%}" />

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel = "stylesheet" type = "text/css" media = "screen" href = "{% static 'css/jquery-ui.css'%}" />
    <!-- The link to the CSS that the grid needs -->
    <link rel = "stylesheet" type = "text/css" media = "screen" href = "{% static 'css/trirand/ui.jqgrid.css'%}" />

</head>
<body>



<table id = "jqGrid"></table>
    <div id = "jqGridPager"></div>

<script type = "text/javascript">

        var MaingridQueryResults_1 = {{available_lessons|safe}};
        var SubgridQueryResults_1 = {{subavailable_lessons|safe}};

        // Main grid
        $("#jqGrid").jqGrid({
            datatype: 'local',
            data: MaingridQueryResults_1,
            colModel: [
                {name: 'id', label: 'id'},
                {name: 'first_name', label: 'first_name'},
                {name: 'last_name', label: 'last_name'},
                {name: 'email', label: 'email'},
                {name: 'phone', label: 'phone'},
                {name: 'address', label: 'address'},
                {name: 'city', label: 'city'},
                {name: 'state', label: 'state'},
                {name: 'zipcode', label: 'zipcode'},
                {name: 'regarde', label: 'regarde'}
            ],

            width: 900,
            height: 300,
            pager: "#jqGridPager",
            //toppager: true,
            rowNum: 20,
            rowList : [20,30,50],
            viewrecords: true,
            altRows: true,
            rownumbers: true,
            rownumWidth: 25,
            multiselect: true,
            multiboxonly: true,
            //multikey:"shiftKey",

            ondblClickRow: function (rowid) {
                var rowData = $(this).getRowData(rowid);
                document.location.href = "../record/" + rowData['id']
            },
            loadComplete: function () {
                $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
            },
            subGrid: false,
            isHasSubGrid : function(ids) {
                var ret = false;
                for(var i = 0; i < SubgridQueryResults_1.length; i++) {
                    if (SubgridQueryResults_1[i].id == ids) {// change .id to name of object you want (idcontact ?)
                        ret = SubgridQueryResults_1[i];
                        return ret
                        break;
                    }
                }
                return ret;
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                //console.info("rows " + rowId)
                for (var i = 0; i < SubgridQueryResults_1.length; i++) {
                    //console.info("Sub id " + SubgridQueryResults_1[i].id)
                    if (SubgridQueryResults_1[i].id == rowId) {// change .id to name of object you want (idcontact ?)
                        //console.info("loop inside subav  " + SubgridQueryResults_1[i].id)
                        var treza = SubgridQueryResults_1.filter(element => element.id == [rowId]) // change .id to name of object you want (idcontact ?)
                        //console.info("treza  " + JSON.stringify(treza))
                    }
                }

                //console.info("subgridivid " +subgridDivId)
                var subgridTableId = subgridDivId + "_t";
                $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                // Subgrid
                $("#" + subgridTableId).jqGrid({
                    datatype: 'local',
                    data: treza,
                    colModel: [
                        {name: 'id', label: 'id'},
                        {name: 'first_name', label: 'first_name'},
                        {name: 'last_name', label: 'last_name'},
                        {name: 'email', label: 'email'},
                        {name: 'phone', label: 'phone'},
                        {name: 'address', label: 'address'},
                        {name: 'city', label: 'city'},
                        {name: 'state', label: 'state'},
                        {name: 'zipcode', label: 'zipcode'},
                        {name: 'regarde', label: 'regarde'}
                    ],
                    multiselect: true,
                    multiboxonly: true,
                    multikey:"shiftKey",
                });
            }

        });
        // color of bottom pager
        //$("#jqGridPager").css("background", "white")
        //$("#jqGridPager").css("color", "black")
        // color of altrow
        //$("tr.jqgrow:odd").css("background", "#DDDDDC");
    </script>

</body>

</html>

Не могли бы вы поделиться кодом, пожалуйста?

— 28.04.2023 17:20

@jcarrera добавил код, как вы просили. Скажи мне, достаточно ли тебе. Спасибо

— 28.04.2023 19:26

css jqgrid

27.04.2023 15:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я сделал пример

Он работает, используя это:

.ui-state-highlight{ opacity: 1!important; background: #0000 !important}

Спасибо @jcarrera, это работает. Я знал, что это как-то связано с непрозрачностью, но забыл о !important (что-то новое в css). Любая идея для цвета rownum при выборе? Я бы хотел, чтобы он стал белым, как и остальная часть линейки (см. фото)

— 29.04.2023 08:42

Да @Nico44044 ! Я обновил ответ и пример

— 29.04.2023 10:10

решение не изменит номер строки при выделении. Мне удалось изменить стандартный цвет, используя: .jqgrow .jqgrid-rownum { background-color: Transparent; фоновое изображение: нет; цвет:#000000}. но как добавить цвет состояния подсветки для rownum?

— 10.05.2023 13:13

28.04.2023 20:29