extjs 将替代行颜色应用于ext js tpl表

nr7wwzry 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(99)

我有低于tpl

items: [{
                xtype: 'container',
                data: record.data,
                tpl: new Ext.XTemplate(
                    '<tpl>' +
                    '<div id="table-w"><div id="table-s"><table class="count-grid"  >' +
                    "<tr>" +
                    "<tpl for='.'>" +
                    "<th align='left' class='x-grid-subtable-header'>" + "Count"
                    "</tpl>" +
                    "</tr>" +
                    "<tpl for='user'>" +
                    "<tr>" +
                    "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" +
                    "</tr>" +
                    "</tpl>" +
                    "</table></div></div>" +
                    "</tpl>")
            }],

从上面的代码中，我想对这些行应用替换颜色

"<tr>" +
                        "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" +
                        "</tr>"

有人能帮我用CSS吗？

extjs

来源：https://stackoverflow.com/questions/63269180/applying-alternate-row-color-to-ext-js-tpl-table

1条答案

按热度按时间

xfyts7mz1#

于飞：

<html>
    <head>
        <style>
            tr.my-custom-css:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>

    </body>
</html>

JS：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'user'
    }]
});
Ext.application({
    name : 'Fiddle',

    launch : function() {
        var record = Ext.create('User', {
            user: [{
                value: "User One"
            }, {
                value: "User Two"
            }, {
                value: "User Three"
            }]
        });

        Ext.create('Ext.panel.Panel', {
            title: "Panel",
            height: 500,
            items: [{
                xtype: 'container',
                data: record.data,
                tpl: new Ext.XTemplate(
                    '<tpl>' +
                    '<div id="table-w"><div id="table-s"><table class="count-grid"  >' +
                    "<tr>" +
                    "<tpl for='.'>" +
                    "<th align='left' class='x-grid-subtable-header'>" + "Count" + // Trailing PLUS is forgotten in your code
                    "</tpl>" +
                    "</tr>" +
                    "<tpl for='user'>" +
                    "<tr class='my-custom-css'>" + // Odd/Even CSS
                    "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" + 
                    "</tr>" +
                    "</tpl>" +
                    "</table></div></div>" +
                    "</tpl>")
            }],
            renderTo: Ext.getBody()
        })
    }
});

赞(0）回复(0）举报 2022-11-05

我来回答

extjs 将替代行颜色应用于ext js tpl表

1条答案

相关问题

热门标签

最新问答