Kendo Grid (1) 換頁置頂 欄位連結 欄位置中 欄位隱藏

其他

此篇主要是教大家當使用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
}

Related Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js