此篇主要是教大家當使用kendo grid欄位時,一些會用到的小技術。
Kendo Grid 換頁後 頁面置頂
使用kendo grid欄位時,如果一頁的資料筆數很多,頁面的捲軸在下面時,當點選下一頁時,畫面會呈現在body下面,不會在上方,因此版主使用下面的方法解決了此問題。
<div id=”grid”></div>
var grid = $(‘#grid’).data(‘kendoGrid’); //先綁定你的欄位id
var pager = grid.pager;
pager.bind(‘change’, pagechange); //綁定當頁碼更換時,執行pagechange()
function pagechange(e){
document.body.scrollTop = document.documentElement.scrollTop = 0; //頁面置頂
}
Kendo Grid 欄位中的內容設定連結
當kendo grid欄位中的內容,需將內容設定連結時,可以使用以下方法
columns: [
{
field : “aa”,
title : “主題”,
template: ‘<a href=”/XXX/XX?aaId=#=aa#&page=${page}”>#=aa#</a>’,
}]
使用template,?後面是要傳的參數,寫法#=aa#可以取到field : “aa”的值,因此上面的連結,會是aa的值並且可以點選連結去這個路徑,而這個路徑會傳參數aaId=#=aa#的值
Kendo Grid 欄位隱藏
以下示範例欄位設定
columns: [
{
field : “aa”,
title : “主題”,
template: ‘<a href=”/XXX/XX?aaId=#=aa#&page=${page}”>#=aa#</a>’,
}
{
field : “bb”,
title : “內容”,
}]
grid.hideColumn(“aa”); //aa欄位就會隱藏
Kendo Grid 欄位高度 置中 置左 置右
kendo grid 欄位內容 文字高度(行高)設定:
.k-grid td {
line-height: 2em;
}
kendo grid 欄位thead表頭tbody表格的內容 置中右左設定:
columns: [
{
field : “aa”,
title : “主題”,
template: ‘<a href=”/XXX/XX?aaId=#=aa#&page=${page}”>#=aa#</a>’,
headerAttributes : {style : “text-align:center”} //設定thead
attributes : {style : “text-align:center”} //設定tbody
}