Question

我已经创建了jqGrid，其中我必须在行选择上给出颜色，但是当我尝试为偶数行提供颜色时，它工作正常但是对于赔率行，它不起作用。我不想使用jQuery或JavaScript，我只是想从CSS中做到这一点。有没有办法实现它？

下面是我的示例代码，它适用于偶数行：

.ui-jqgrid .ui-state-highlight:nth-child(even) { background: #d0e5f5; }

对于奇数行，它不起作用：

 .ui-jqgrid .ui-state-highlight:nth-child(odd) { background: #d0e5f5; }

Answer 1

抱歉，但所有工作都没有任何问题。按＆＃34;运行代码段＆＃34;下面的按钮，并在演示中突出显示奇数行或偶数行

＆＃13;

$(function () {
    "use strict";
    var mydata = [
            { id: "1",  invdate: "2007-10-21", name: "test",   note: "3note note note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "2",  invdate: "2007-10-22", name: "test2",  note: "3note2 note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "3",  invdate: "2007-09-01", name: "test3",  note: "3note3 note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "4",  invdate: "2007-10-14", name: "test4",  note: "3note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "5",  invdate: "2007-10-31", name: "test5",  note: "3note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "6",  invdate: "2007-09-06", name: "test6",  note: "3note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "7",  invdate: "2007-10-04", name: "test7",  note: "3note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "8",  invdate: "2007-10-03", name: "test8",  note: "3note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "9",  invdate: "2007-09-22", name: "test9 test9 test9 test9 test9",  note: "3note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
            { id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
            { id: "11", invdate: "2007-09-28", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
            { id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
        initDatepicker = function (elem) {
            $(elem).datepicker({
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        numberTemplate = {formatter: "number", align: "right", sorttype: "number",
            editrules: {number: true, required: true},
            searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }},
        $grid = $("#list");

    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
        colModel: [
            { name: "name", editrules: {required: true} },
            { name: "invdate", align: "center", sorttype: "date",
                formatter: "date",
                searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
            { name: "amount", template: numberTemplate },
            { name: "tax", template: numberTemplate },
            { name: "total", template: numberTemplate },
            {name: "closed", align: "center", formatter: "checkbox",
                edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
            {name: "ship_via", align: "center", formatter: "select",
                edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "FE" },
                stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } },
            { name: "note", sortable: false, search: false, edittype: "textarea" }
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: "#pager",
        gridview: true,
        rownumbers: true,
        autoencode: true,
        ignoreCase: true,
        sortname: "invdate",
        viewrecords: true,
        sortorder: "desc",
        shrinkToFit: false,
        height: "auto"
    });
});

＆＃13;

.ui-jqgrid-hdiv { overflow-y: hidden; }
.ui-jqgrid .ui-state-highlight:nth-child(even) { background: #CCCCFF; }
.ui-jqgrid .ui-state-highlight:nth-child(odd) { background: #B2EC5D; }

＆＃13;

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>

＆＃13;

jqGrid奇数行ui.state.highlight不工作

1 个答案: