我有一个下拉列表，其中包含“周数”信息，因此，每次用户在dropdownList中更改周时，我都希望在kendo网格的标题中反映出来。我试图用jquery更改标题的标题，但无法解决问题。
这是生成的HTML，我要更改的标题为data-title =“ ForecastWeek23”，因此，如果用户选择第24周，则希望将其更改为“第24周预测”。 >
<div id="grdCsmForecast" class="kendoGridHorizontalScroll k-grid k-widget" data-role="grid" style="">
<div class="k-header k-grid-toolbar"><a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a></div>
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col style="width:80px">
<col style="width:90px">
.....................
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" rowspan="2" data-index="0" id="91073bbd-55b7-468c-9dea-7e8856c41af0" class="k-header"></th>
<th role="columnheader" colspan="6" data-colspan="6" data-title="Contract Details" id="d012d7e5-982c-453a-9273-fc7484c6a416" class="k-header">Contract Details</th>
<th role="columnheader" colspan="3" data-colspan="3" data-title="Current Renewal" id="3dba6f39-b810-4549-a055-442edb1e2f5f" class="k-header">Current Renewal</th>
<th role="columnheader" colspan="3" data-colspan="3" data-title="Target" id="82e71379-9b3e-4bf5-9c1d-665e55ecdcb6" class="k-header">Target</th>
<th role="columnheader" colspan="3" data-colspan="3" data-title="ForecastWeek23" id="3e47cb9c-f5aa-49ee-bed7-f572730ebb3c" class="k-header">ForecastWeek23</th>
<th role="columnheader" colspan="24" data-colspan="24" data-title="Previous Forecasts" id="b7c3976a-d0b2-4e13-b081-c092f801e29a" class="k-header">Previous Forecasts</th>
</tr>
<tr role="row">
<th role="columnheader" data-field="RecordId" data-title="RecordId" data-index="1" id="bad2d367-deea-471e-9171-774cd03c98eb" class="k-header k-first">RecordId</th>
<th role="columnheader" data-field="SaleId" data-title="SaleId" data-index="2" id="89cb9355-de82-4e6c-a24c-91e9c3b22d63" class="k-header">SaleId</th>
.......................
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
...................
</table>
</div>
</div>
我在网格的数据绑定方法中尝试过：
var weekid = getKendoDdl("ddlForecastWeek", "kendoDropDownList").value();
$("#grdCsmForecast thead [data-field=ForecastWeek23]").html("Forecast Week " + weekid);
这是我的剑道网格的定义：
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
autoBind: false,
noRecords: {
template: "<p style='padding-top:10px'>No records available.</p>"
},
scrollable: true,
//pageable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: {
pageSize: 20,
input: true,
numeric: false,
pageSizes: ["All", 5, 10, 20, 50, 100],
refresh: false
},
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "300px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Current Renewal",
columns: [
{ field: "CurrentRenewalNumber", title: "Nr", width: "40px", attributes: { "class": "currentRenewalGridStyle" } },
{ field: "CurrentRenewalDate", title: "Date", width: "80px", attributes: { "class": "currentRenewalGridStyle" } },
{ field: "CurrentRenewalCancellationDate", title: "Canc Date", width: "80px", attributes: { "class": "currentRenewalGridStyle" }, footerTemplate: "Total:" }
]
},
{
title: "Target",
columns: [
{ field: "TargetTotalContractValue", title: "TCV", width: "75px", attributes: { "class": "targetGridStyle" }, footerTemplate: "#: sum # " },
{ field: "TargetTotalContractMonths", title: "Months", width: "70px", attributes: { "class": "targetGridStyle" } },
{ field: "Target12MonthsContractValue", title: "12Month", width: "75px", attributes: { "class": "targetGridStyle" }, footerTemplate: "#: sum # " }
]
},
{
title: "ForecastWeek23",
//headerTemplate: getHeader(),
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
},
{
title: "Previous Forecasts",
columns: [
{ field: "PrevForecastMonth1_TotalContractValue", title: "1", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth2_TotalContractValue", title: "2", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth3_TotalContractValue", title: "2", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth4_TotalContractValue", title: "4", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth5_TotalContractValue", title: "5", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth6_TotalContractValue", title: "6", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth7_TotalContractValue", title: "7", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth8_TotalContractValue", title: "8", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth9_TotalContractValue", title: "9", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth10_TotalContractValue", title: "10", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth11_TotalContractValue", title: "11", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth12_TotalContractValue", title: "12", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth13_TotalContractValue", title: "13", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth14_TotalContractValue", title: "14", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth15_TotalContractValue", title: "15", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth16_TotalContractValue", title: "16", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth17_TotalContractValue", title: "17", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth18_TotalContractValue", title: "18", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth19_TotalContractValue", title: "19", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth20_TotalContractValue", title: "20", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth21_TotalContractValue", title: "21", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth22_TotalContractValue", title: "22", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth23_TotalContractValue", title: "23", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " },
{ field: "PrevForecastMonth24_TotalContractValue", title: "24", width: "70px", attributes: { "class": "previousForecastsGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
感谢您的帮助。
答案 0 :(得分：1)
您错过了选择器上的引号。试试这个：
$("#grdCsmForecast thead [data-title='ForecastWeek23']").html("Forecast Week " + weekid);