Question

我正在尝试将不同的css类应用于数据表头和数据表数据。但是yui3数据表的columns字段中的className属性仅将其应用于数据。我尝试了headerTemplate属性，但它没有显示列标签。这是我在jsfiddle http://jsfiddle.net/anandp504/hJsMk/1/中的代码和数据表的javascript代码。带有“day”键的列是我尝试为列标题

应用css类的地方

YUI().use("datatable", "datatype", function (Y) {

/*------------------------------------*/
function formatDate(cell) {
    return Y.DataType.Date.format(cell.value, { format: cell.record.get('date_format') });
}

/*------------------------------------*/
function formatCurrency(cell) {
    //console.log("column key : " + cell.column.key);
    if(cell.column.key == "imps"){
        console.log(JSON.stringify(cell));
    }
    format = {
        prefix: "$",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
    };
    cell.record.set(Number(cell.value));
    return Y.DataType.Number.format(Number(cell.value), format);
}

/*------------------------------------*/
/*-- create datatable --*/
var datatable = new Y.DataTable({
columns: [
    {key: "day", label: "Day", headerTemplate: '<th id="{id}" title="Day" class="datatable-header" {_id}>&#9679;</th>', formatter: formatDate, sortable: true, allowHTML: true},
    {key: "campaign",label: " Campaign Name", sortable: true},
    {key: "imps",label: " Impressions", formatter: formatCurrency, sortable: true, className: "number"},
    {key: "clicks",label: "clicks", className: "number", sortable: true},
    {key: "totalConvs",label: "Total Conversions", className: "number", sortable: true},
    {key: "costEcpm",label: "Cost Ecpm", formatter: formatCurrency, sortable: true, className: "number"},
    {key: "revenueEcpm",label: "Revenue Ecpm", formatter: formatCurrency, className: "number", sortable: true},
    {key: "profitEcpm",label: "Profit Ecpm",  formatter: formatCurrency, className: "number", sortable: true}
],
/*-- Data Set for the DataTable --*/
data : [
    {"day": Y.DataType.Date.parse("Sun Aug 15 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron DC FBX rt 1x1 cm.fbx/academydc (1601412)","imps": "24393","clicks": Number("3"),"totalConvs": Number("0"),"costEcpm": Number("0.191327675972615094494000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.758672324027384905506000") },
    {"day": new Date("Sun Aug 02 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron Boston rt FBX 1x1  cm.fbx/academybos (1601410)","imps": "22067","clicks": Number("6"), "totalConvs": Number("0"),"costEcpm": Number("0.186746318031449675987000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.763253681968550324013000") },
    {"day": new Date("Sun Aug 09 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo DC BOOM 300 App_cm.AcademyBus_WashingtonDC (1505444)","imps": "10157","clicks": Number("0"),"totalConvs": Number("0"),"costEcpm": Number("1.133644899187481191694000"),"revenueEcpm": Number("1.909000000000000000000000"),"profitEcpm": Number("0.775355100812518808306000") },
    {"day": new Date("Sat Aug 06 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron Boston rt FBX 1x1  cm.fbx/academybos (1601410)","imps": "1048","clicks": Number("5"),"totalConvs": Number("0"),"costEcpm": Number("0.193939241407362212731000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.756060758592637787269000") }
],
summary: "Price sheet for inventory parts",
caption: "Network Advertiser Analytics"
});
datatable.render("#datatable-example");
});

Answer 1

假设您将在CSS样式定义中沿className使用th或td选择器，以便区分它们。在您的情况下，标题单元格为th.yui3-datatable-col-day，数据单元格为td.yui3-datatable-col-day。同样，您可以使用thead .yui3-datatable-col-day。

在最新版本中，您使用的格式化程序内置于数据表中。您只需要将datatable-formatters模块添加到依赖项中。请参阅API Docs。

Answer 2

我必须创建如下的css类，并在列的className属性下分配它们：

.yui3-datatable th.datatable-header { 
text-align: center; font-weight:bold ; color: #00000; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}

.yui3-datatable td.datatable-data { 
color: #00000; font-family: Arial, Helvetica, sans-serif; font-size: 10px;
}

列属性如下所示：

columns: [
    {key: "day", label: "Day", formatter: formatDate, sortable: true, allowHTML: true, className: "datatable-header datatable-data"},
    {key: "campaign",label: " Campaign Name", sortable: true, className: "datatable-header datatable-data"},
    {key: "imps",label: " Impressions", formatter: formatCurrency, sortable: true, className: "datatable-header datatable-data number"},
    {key: "clicks",label: "clicks", className: "number", sortable: true, className: "datatable-header datatable-data number"}
]

YUI3数据表：如何为表头和表数据应用单独的css类

2 个答案: