当前位置: 首页 > 使用教程

UI组件库Kendo UI for Vue原生组件中文教程:入门指南(三)

发布时间:2022-06-14

在本文中,您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件。

Kendo UI最新官方正式版下载

6. 添加Kendo UI for Vue数据网格

Kendo UI for Vue Data Grid提供了100+个即用型功能,涵盖从分页、排序、过滤、编辑和分组到行和列虚拟化以及 Excel 导出的所有内容。在本节中,您将尝试其中的几个功能,但让我们从一个简单的网格开始。

将 Grid 组件、process包和products.json文件导入到 src/App.vue 文件中。

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

添加下面的代码来创建一个绑定到您产品列表的网格,将其添加到src/App.vue 文件内模板中包含 DropDownList 的 <p> 之后。

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

使用以下代码定义 Grid 组件:

export default {
name: ‘App’,
components: {
‘dropdownlist’: DropDownList,
‘grid’: Grid,
},
//…………..

在数据选项中添加以下行:

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’}
]
//…………..
}
}

当你的浏览器刷新时,会看到第一个网格!很简单,但还不是很真实。

要填写此示例,让我们使用 Grid API 添加下面的功能列表。 通读特性,然后获取更新后的 App.vue 代码(如下),亲自尝试更新后的 Grid。

  • 向 Grid 添加高度样式来激活滚动。
  • 添加用户友好的列标题。
  • 格式化价格列中的数字。
  • 启用分页和排序,这将需要对应用程序代码进行一些添加,如下所述。
  • 将 Discontinued 列中的布尔值显示为复选框,为此将通过cell 属性和自定义组件自定义表格单元格渲染。

以下是我们如何实现上述功能:

  • 在 Grid 声明中分别启用每个数据操作(:pageable=”pageable” 和 :sortable=”sortable”),在数据选项中添加以下属性。

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

  • 配置数据操作设置和网格数据的初始状态,例如:
    • 最初的skip将是第一个。
    • 页面大小 (take) 将为 10。
    • 网格最初将按产品名称排序。
    • 将所有这些设置保存在数据属性中,并使用以下代码将它们添加到网格中:

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

  • 为了显示正确的 Grid 数据,我们将 Grid 绑定到函数的输出,替代直接绑定到 products 数组。将使用导入的进程函数,它是 kendo-data-query 包的一部分,该函数的结果将存储在 dataResult 数据属性中。
  • 定义一个 dataStateChange 处理程序,它做了两件事:
    • 在每次用户交互后通过 createAppState 函数更新 take、skip、filter 和 sort 数据属性的状态。
    • 数据属性更新后,该函数所做的第二件事是从流程函数中获取结果并将其设置为 dataResult 属性,这将导致 Grid 刷新并显示预期的数据。要显示应用的数据更改,我们必须将 Grid 的 data-items 属性更改为 :data-items=”dataResult”。
  • 为 Grid 的 Discontinued 字段定义模板,在 src/App.vue 文件的模板部分的 grid 标签内添加以下内容:

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

通过为 Discontinued 单元格添加单元格属性来编辑列数据属性。

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

  • 要尝试上述所有功能,请复制以下代码并将其粘贴到项目的 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致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。


Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都315活动正式开启
扫码咨询
电话咨询
023-68661681
返回
顶部