1

我正在尝试将不同的 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");
});
4

2 回答 2

1

我必须如下创建 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"}
]
于 2013-08-22T09:51:08.160 回答
1

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

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

于 2013-08-22T05:44:27.973 回答