Mit einer ListView können Sie eine benutzerdefinierte Vorlage definieren, um eine Liste von Elementen anzuzeigen, wobei entweder Remote- oder lokale Daten verwendet werden. Erfahren Sie, wie Sie eines ganz einfach in Ihren Web-Apps verwenden können.
In meinem letzten Beitrag haben wir etwas über die ButtonGroup-Komponente in Kendo UI für Vue erfahren, und in diesem Beitrag erfahren Sie, wie Sie den ListView verwenden Komponente.
Die ListView ermöglicht es Ihnen, eine benutzerdefinierte Vorlage zum Anzeigen einer Liste von Elementen zu definieren. Die Datenelemente können aus einer lokalen Datenquelle oder einer entfernten Datenquelle wie einer API stammen. Es ist möglich, eine Liste von Elementen in Vue mit dem v-for zu rendern Attribut. Allerdings ist die Kendo-Benutzeroberfläche ListView Komponente verfügt über zusätzliche Funktionen. Bei der Verwendung von Remote-Daten können Ressourcen erstellt, abgerufen, aktualisiert und gelöscht werden, ohne dass Request-Handler geschrieben werden müssen. Anfragen werden von einem DataSource erledigt Komponente, indem Sie einfach ihre Attribute festlegen. Zusätzlich kann die Liste mit einem Pager paginiert werden Komponente.
Zuerst werden wir sehen, wie man den ListView verwendet mit lokalen Daten. Dann erstellen wir eine Liste aus einer entfernten Datenquelle, fügen Paginierung hinzu und fügen jedem Element Bearbeitungs- und Löschfunktionen hinzu.
Erstellen einer Listenansicht aus lokalen Daten
Wir beginnen mit der Initialisierung eines Vue-Projekts mit der Vorlage webpack-simple. Als Nächstes installieren wir Kendo UI, das Material-Design und ListView Vue-Paket mit den folgenden Befehlen.
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-material
npm install --save @progress/kendo-listview-vue-wrapper
In unserem main.js Datei, werden wir diese Pakete importieren. Aus dem listview-vue-wrapper Paket importieren wir den Pager , ListView , und ListViewInstaller . Unsere Komponenten werden weltweit unter dem ListViewInstaller registriert und zur Komponentenliste hinzugefügt.
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-material/dist/all.css'
import { Pager,
ListView,
ListViewInstaller } from '@progress/kendo-listview-vue-wrapper'
Vue.use(ListViewInstaller)
new Vue({
el: '#app',
components: {
Pager,
ListView
},
render: h => h(App)
})
In App.vue Wir löschen das gesamte Markup und fügen die ListView in die Vorlage ein.
Im Skript fügen wir den Daten der Komponente eine Datenquelle und eine Vorlage hinzu und binden sie an die ListView. Die Datenquelle wird über den data-source an die ListView gebunden Attribut. Das Template wird über den template gebunden Attribut. Zuletzt ersetzen wir die Stile durch die Stile für unsere ListView.
<template>
<div id="app">
<kendo-listview :data-source="dataSource" :template="template">
</kendo-listview>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
dataSource: [
{
name: 'Jane',
surname: 'Doe',
gender: 'female',
region: 'United States'
},
{
name: 'John',
surname: 'Doe',
gender: 'male',
region: 'United States'
}
],
template: `
<div class="card">
<div class="card-body">
<span>First Name:</span> #:name#<br>
<span>Last Name:</span> #:surname#<br>
<span>Gender:</span> #:gender#<br>
<span>Region:</span> #:region#<br>
</div>
</div>
`,
}
}
}
</script>
<style>
#app {
width: 50%;
min-width: 360px;
margin: 0 auto;
font-family: 'helvetica';
}
.k-listview {
background-color: #3f51b5;
}
.card {
background: #fff;
font-size: 16px;
width: 75%;
min-width: 286px;
margin: 2em auto;
padding: 1.25em;
border-radius: 4px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
}
.card-body span {
width: 100px;
display: inline-block;
font-weight: bold;
}
</style>
Remote-Daten verwenden
Unsere Remote-Daten werden genauso strukturiert wie unsere lokalen Daten. Die von uns verwendete API stammt von der Website uinames.com. Zunächst installieren wir den DataSource Vue-Wrapper und importieren das Paket in main.js , registrieren Sie die Komponente global und fügen Sie sie der Komponentenliste hinzu.
npm install --save @progress/kendo-datasource-vue-wrapper
import { DataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
Vue.use(DataSourceInstaller)
new Vue({
el: '#app',
components: {
Pager,
ListView,
DataSource
},
render: h => h(App)
})
Als Nächstes fügen wir die Datenquellenkomponente zu unserer App-Vorlage hinzu. Wir müssen die URL der Anfrage und den Datentyp in den Attributen angeben. Wir rufen Daten ab, also verwenden wir den transport-read-url -Attribut, um unsere URL festzulegen. Wir geben den Datentyp JSON im transport-read-data-type an Attribut. Wir müssen auch einen page-size hinzufügen Attribut, damit die Paginierung funktioniert. Sie können andere Anforderungstypen festlegen und das Schema in Ihren Datenquellenattributen definieren. Unsere API gibt ein Array von Objekten zurück, sodass das Schema nicht konfiguriert werden muss.
Die folgende DataSource-Komponente wird der Vorlage hinzugefügt.
<kendo-datasource ref="dataSource"
:transport-read-url="'https://uinames.com/api/?amount=20®ion=united+states'"
:transport-read-data-type="'json'"
:page-size="4">
</kendo-datasource>
Die Pager-Komponente teilt die Liste in Seiten auf. Die Pager-Komponente ist über ihren data-source-ref an eine DataSource-Komponente gebunden Attribut. Der Wert ist der Wert von ref Attribut, das der DataSource-Komponente gegeben wurde. Die folgende Komponente wird in unserem Template direkt vor dem ListView platziert:
<kendo-pager :data-source-ref="'dataSource'">
Die ListView-Komponente muss auch an eine DataSource-Komponente gebunden werden. Der data-source Attribut wird durch data-source-ref ersetzt und gleich dem Wert von ref der DataSource-Komponente sein Attribut.
Das ist die aktualisierte Listview-Komponente.
<kendo-listview :data-source-ref="'dataSource'" :template="template"></kendo-listview>
Bearbeiten und Löschen
Bearbeitungs- und Löschfunktionen können einfach zu unserer App hinzugefügt werden. Zum Bearbeiten fügen Sie einen Bearbeiten-Button mit der Klasse k-edit-button hinzu zu Ihrer Listenvorlage. Definieren Sie dann eine Bearbeitungsvorlage in Ihren Daten. Die Bearbeitungsvorlage sollte eine Schaltfläche zum Aktualisieren und Abbrechen haben. Sie können eine Update-Schaltfläche erstellen, indem Sie die Klasse k-update-button hinzufügen zu einem Element. Sie erstellen einen Abbrechen-Button, indem Sie die Klasse k-cancel-button hinzufügen zu einem Element. Als nächstes fügen Sie das Attribut edit-template hinzu in die listview-Komponente und setzen Sie sie gleich der von Ihnen definierten Bearbeitungsvorlage.
Es ist nicht erforderlich, einen Ereignishandler zu schreiben. Durch Klicken auf die Bearbeiten-Schaltfläche wird die Komponente automatisch in den Bearbeitungsmodus versetzt. Wenn Sie auf die Schaltfläche „Aktualisieren“ klicken, werden die Änderungen übernommen, und wenn Sie auf die Schaltfläche „Abbrechen“ klicken, werden alle vorgenommenen Änderungen verworfen. Um ein Element zu löschen, müssen Sie der Vorlage nur eine Schaltfläche hinzufügen, die die Klasse k-delete-button hat . Das Folgende ist die aktualisierte Vorlage mit der Schaltfläche „Bearbeiten“ und „Löschen“, die der Kopfzeile der Karte hinzugefügt wurde.
<div class="card">
<div class="card-header">
<div class="card-controls">
<button class="k-button k-edit-button"><span class="k-icon k-i-edit"></span></button>
<button class="k-button k-delete-button"><span class="k-icon k-i-close"></span></button>
</div>
</div>
<div class="card-body">
<span>First Name:</span> #:name#<br>
<span>Last Name:</span> #:surname#<br>
<span>Gender:</span> #:gender#<br>
<span>Region:</span> #:region#<br>
</div>
</div>
Die Bearbeitungsvorlage zeigt den Namen jedes Felds und eine Eingabe zur Eingabe seines neuen Werts an. Die Eingabe sollte einen data-bind haben und name Attribut gleich dem Feldnamen. Dies ist unsere neue Bearbeitungsvorlage:
<div class="card">
<div class="card-header">
<div class="card-controls">
<a class="k-button k-update-button"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
<div class="card-body">
<div>
<label>First Name:</label>
<input type="text" class="k-textbox" data-bind="value:name" name="name">
</div>
<div>
<label>Last Name:</label>
<input type="text" class="k-textbox" data-bind="value:surname" name="surname">
</div>
<div>
<label>Gender:</label>
<input type="text" class="k-textbox" data-bind="value:gender" name="gender">
</div>
<div>
<label>Region:</label>
<input type="text" class="k-textbox" data-bind="value:region" name="region">
</div>
</div>
</div>
Als nächstes die edit-template -Attribut wird der ListView-Komponente hinzugefügt.
<kendo-listview
:data-source-ref="'dataSource'"
:template="template"
:edit-template="editTemplate">
</kendo-listview>Schließlich sind hier die zusätzlichen Stile.
.card-body span, .card-body label {
width: 100px;
display: inline-block;
font-weight: bold;
}
.card-header {
height: 2.5em;
}
.card-controls {
float: right;
}
Dies ist der Link zum endgültigen Projekt:https://github.com/albertaw/kendoui-listview
Zusammenfassung
Zuerst haben wir eine ListView-Komponente erstellt, indem wir unsere Datenelemente lokal definiert haben. Wir haben eine Vorlage für die Elemente erstellt, die wir mit dem template an die Komponente gebunden haben Attribut. Als Nächstes haben wir gesehen, wie man eine Listenansicht mit Daten aus einer API erstellt. Die gesamte Datenverarbeitung wurde in der DataSource-Komponente konfiguriert und wir haben die Paginierung mithilfe der Pager-Komponente hinzugefügt. Zuletzt haben wir die Möglichkeit hinzugefügt, Karten zu bearbeiten und zu löschen.
Im nächsten Beitrag werden wir weiter mit der DataSource-Komponente arbeiten, um ein Grid zu erstellen.
Ressourcen
- Kendo UI Vue-Dokumentation und -Demos
- Vue.js Webpack-einfache Vorlage
- Projekt-Repo
- Vue.js Webpack-einfache Vorlage
- ListView-Übersicht
- Datenquellenübersicht
- Pager-Übersicht
Probieren Sie es selbst aus
Möchten Sie die Vorteile der über 70 vorgefertigten Kendo-UI-Komponenten wie Grid oder Scheduler nutzen? Sie können noch heute mit einer kostenlosen Testversion von Kendo UI for Vue beginnen und schneller mit der Entwicklung Ihrer Apps beginnen.
Testversion der My Kendo-Benutzeroberfläche starten
Angular-, React- und jQuery-Versionen
Suchen Sie nach einer UI-Komponente zur Unterstützung bestimmter Frameworks? Sehen Sie sich Kendo UI for Angular, Kendo UI for React oder Kendo UI for jQuery an.