用户投稿简介
最近小弟有个使用资料表的需求，之前使用过material ui，就整体画面来说是个不错的套件，可惜在资料呈现上相对普通。刚好最近看到商用软体progress的ui模块，他对于资料的呈现有相对较多的资源，可以绘製各式图表，这边简单做个整理与分享。
环境
使用 create-react-app 快速建立 npm project
npx create-react-app my-kendocd my-kendo安装npm依赖
npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs实践
首先更改./public/index.html内容，引入css
<head> <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head><body> <div id="root"></div></body>建立资料./src/products.json
[{ "ProductID" : 1, "ProductName" : "Chai", "UnitsInStock" : 39, "Discontinued" : false, "Category" : { "CategoryID" : 1, "CategoryName" : "Beverages" }},{ "ProductID" : 2, "ProductName" : "Chang", "UnitsInStock" : 21, "Discontinued" : true, "Category" : { "CategoryID" : 2, "CategoryName" : "Produce" }}]新增档案./src/dataTable.js并写入以下内容
import React from 'react';import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';// 产品目录(资料)import products from './products.json';class DataTable extends React.Component { constructor(props) { //在子类的constructor中必须先调用super才能引用this super(props); // 初始化状态 this.state = { gridData:products }; } render(){ return( <Grid style={{ height: '400px',width:'650px' }} data={this.state.gridData} > <Column field='ProductID' title='ID' width='50px' /> <Column field='ProductName' title='Product Name' width='160px' /> <Column field='UnitsInStock' title='Units In Stock' width='160px'/> <Column field='Discontinued' width='120px' cell={(props) => {return ( <td> <input disabled type='checkbox' checked={props.dataItem[props.field]} /> </td> );}} /> <Column field='Category.CategoryName' title='CategoryName' width='150px' /> </Grid> ); }}export default DataTable;修改./src/App.js内容
import React from 'react';import DataTable from './dataTable.js';function App() { return ( <div> <DataTable /> </div> );}export default App;最后只要执行npm start就可以看到我们的资料表了！
顺带附上github给大家参考
结轮
我们在kendo ui里面只要注意Grid的data属性与Column的field属性，即可快速呈现表格。
微信扫一扫打赏
支付宝扫一扫打赏
