在本文中，您將通過構(gòu)建一個(gè)包含 Grid、DropDownList、Window 和設(shè)計(jì)主題的小應(yīng)用程序來學(xué)習(xí)如何使用Kendo UI for Vue組件。

Kendo UI最新官方正式版下載

6. 添加Kendo UI for Vue數(shù)據(jù)網(wǎng)格

Kendo UI for Vue Data Grid提供了100+個(gè)即用型功能，涵蓋從分頁(yè)、排序、過濾、編輯和分組到行和列虛擬化以及 Excel 導(dǎo)出的所有內(nèi)容。在本節(jié)中，您將嘗試其中的幾個(gè)功能，但讓我們從一個(gè)簡(jiǎn)單的網(wǎng)格開始。

將 Grid 組件、process包和products.json文件導(dǎo)入到 src/App.vue 文件中。

import products from './appdata/products.json';
import { process } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';

添加下面的代碼來創(chuàng)建一個(gè)綁定到您產(chǎn)品列表的網(wǎng)格，將其添加到src/App.vue 文件內(nèi)模板中包含 DropDownList 的 <p> 之后。

<grid
:data-items="products"
:columns="columns"
></grid>

使用以下代碼定義 Grid 組件：

export default {
name: 'App',
components: {
'dropdownlist': DropDownList,
'grid': Grid,
},
//..............

在數(shù)據(jù)選項(xiàng)中添加以下行：

data: function() {
return {
categories: categories,
products: products,
columns: [
{ field: 'ProductName', title: 'Product Name'},
{ field: 'UnitPrice', title: 'Price' },
{ field: 'UnitsInStock', title: 'Units in Stock' },
{ field: 'Discontinued'}
]
//..............
}
}

當(dāng)你的瀏覽器刷新時(shí)，會(huì)看到第一個(gè)網(wǎng)格！很簡(jiǎn)單，但還不是很真實(shí)。

要填寫此示例，讓我們使用 Grid API 添加下面的功能列表。 通讀特性，然后獲取更新后的 App.vue 代碼（如下），親自嘗試更新后的 Grid。

• 向 Grid 添加高度樣式來激活滾動(dòng)。
• 添加用戶友好的列標(biāo)題。
• 格式化價(jià)格列中的數(shù)字。
• 啟用分頁(yè)和排序，這將需要對(duì)應(yīng)用程序代碼進(jìn)行一些添加，如下所述。
• 將 Discontinued 列中的布爾值顯示為復(fù)選框，為此將通過cell 屬性和自定義組件自定義表格單元格渲染。

以下是我們?nèi)绾螌?shí)現(xiàn)上述功能：

• 在 Grid 聲明中分別啟用每個(gè)數(shù)據(jù)操作（:pageable="pageable" 和 :sortable="sortable"），在數(shù)據(jù)選項(xiàng)中添加以下屬性。

data: function() {
return {
//..............
pageable: true,
sortable: true,
//..............
}
}

• 配置數(shù)據(jù)操作設(shè)置和網(wǎng)格數(shù)據(jù)的初始狀態(tài)，例如：
  • 最初的skip將是第一個(gè)。
  • 頁(yè)面大小 (take) 將為 10。
  • 網(wǎng)格最初將按產(chǎn)品名稱排序。
  • 將所有這些設(shè)置保存在數(shù)據(jù)屬性中，并使用以下代碼將它們添加到網(wǎng)格中：

data: function() {
return {
//..............
skip: 0,
take: 10,
sort: [
{ field: "ProductName", dir: "asc" }
]
//..............
}
}

• 為了顯示正確的 Grid 數(shù)據(jù)，我們將 Grid 綁定到函數(shù)的輸出，替代直接綁定到 products 數(shù)組。將使用導(dǎo)入的進(jìn)程函數(shù)，它是 kendo-data-query 包的一部分，該函數(shù)的結(jié)果將存儲(chǔ)在 dataResult 數(shù)據(jù)屬性中。
• 定義一個(gè) dataStateChange 處理程序，它做了兩件事：
  • 在每次用戶交互后通過 createAppState 函數(shù)更新 take、skip、filter 和 sort 數(shù)據(jù)屬性的狀態(tài)。
  • 數(shù)據(jù)屬性更新后，該函數(shù)所做的第二件事是從流程函數(shù)中獲取結(jié)果并將其設(shè)置為 dataResult 屬性，這將導(dǎo)致 Grid 刷新并顯示預(yù)期的數(shù)據(jù)。要顯示應(yīng)用的數(shù)據(jù)更改，我們必須將 Grid 的 data-items 屬性更改為 :data-items="dataResult"。
• 為 Grid 的 Discontinued 字段定義模板，在 src/App.vue 文件的模板部分的 grid 標(biāo)簽內(nèi)添加以下內(nèi)容：

<template v-slot:discontinuedTemplate="{ props }">
<td colspan="1">
<input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" />
</td>
</template>

通過為 Discontinued 單元格添加單元格屬性來編輯列數(shù)據(jù)屬性。

columns: [
{ field: 'ProductName', title: 'Product Name'},
{ field: 'UnitPrice', title: 'Price' },
{ field: 'UnitsInStock', title: 'Units in Stock' },
{ field: 'Discontinued', cell: 'discontinuedTemplate' }
]

• 要嘗試上述所有功能，請(qǐng)復(fù)制以下代碼并將其粘貼到項(xiàng)目的 App.vue 文件中。

<template>
<div id="app">
<h1>Hello Kendo UI for Vue!</h1>
<p>
<dropdownlist
:data-items="categories"
:data-item-key="'CategoryID'"
:text-field="'CategoryName'"
:default-item="defaultItems"
@change="handleDropDownChange"
>
</dropdownlist>
&nbsp; Selected category ID: <strong>{{this.dropdownlistCategory}}</strong>
</p>

<grid
:data-items="dataResult"
:pageable="pageable"
:sortable="sortable"
:sort="sort"
:skip="skip"
:take="take"
:columns="columns"
@datastatechange="dataStateChange"
:style="{ height: '400px' }"
>

<template v-slot:discontinuedTemplate="{ props }">
<td colspan="1">
<input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" />
</td>
</template>
</grid>

</div>
</template>

<script>
import categories from './appdata/categories.json';
import products from './appdata/products.json';
import { process } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import '@progress/kendo-theme-default/dist/all.css';

export default {
name: 'App',
components: {
'dropdownlist': DropDownList,
'grid': Grid
},
data: function() {
return {
categories: categories,
products: products,
defaultItems: {CategoryID: null, CategoryName: "Product categories"},
dropdownlistCategory: null,
pageable: true,
sortable: true,
skip: 0,
take: 10,
sort: [
{ field: "ProductName", dir: "asc" }
],
filter: null,
columns: [
{ field: 'ProductName', title: 'Product Name'},
{ field: 'UnitPrice', title: 'Price' },
{ field: 'UnitsInStock', title: 'Units in Stock' },
{ field: 'Discontinued', cell: 'discontinuedTemplate' }
],
dataResult:[]
}
},
created() {
const dataState = {
skip: this.skip,
take: this.take,
sort: this.sort,
};

this.dataResult = process(products, dataState);
},
methods: {
handleDropDownChange (e) {
this.dropdownlistCategory = e.target.value.CategoryID;

if (e.target.value.CategoryID !== null) {
this.filter = {
logic: 'and',
filters: [{ field: 'CategoryID', operator: 'eq', value: e.target.value.CategoryID }]
}
this.skip = 0
} else {
this.filter = []
this.skip = 0
}
let event = {data:{
skip: this.skip,
take: this.take,
sort: this.sort,
filter: this.filter
}};
this.dataStateChange(event);
},
createAppState: function(dataState) {
this.take = dataState.take;
this.skip = dataState.skip;
this.sort = dataState.sort;
},
dataStateChange (event) {
this.createAppState(event.data);
this.dataResult = process(products, {
skip: this.skip,
take: this.take,
sort: this.sort,
filter: this.filter
});
}
}
}
</script>

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論