Instalação | Uso Básico | Propriedades | Eventos |
O componente DragGrid é uma especialização do GridEditable, permitindo alterar a ordem com que as linhas são exibidas com a funcionalidade de arrastar e soltar. Para o funcionamento do componente é necessária uma coluna de ordenação contendo números a partir de 0.
Para instalar o pacote basta rodar o seguinte comando:
npm install @zeedhi/zd-drag-grid
Ou instale os pacotes separadamente:
npm install @zeedhi/zd-drag-grid-vue @zeedhi/zd-drag-grid-common
Com isso, dois pacotes serão instalados: o @zeedhi/zd-drag-grid-common e o @zeedhi/zd-drag-grid-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-drag-grid-vue dentro de seu arquivo de configuração zeedhi.ts
import ZdDragGrid from '@zeedhi/zd-drag-grid-vue';
Vue.component('ZdDragGrid', ZdDragGrid);
Já o pacote @zeedhi/zd-drag-grid-common deve ser importado no arquivo controller do componente.
Para usar, defina a propriedade component como 'ZdDragGrid'.
{
"name": "example",
"component": "ZdDragGrid"
}
Nome | Tipo | Default | Descrição |
---|---|---|---|
orderColumnName | string | '' | |
orderMode | 'asc' | 'desc' | 'asc' |
Nome | Propriedades | Descrição |
---|---|---|
onDragMove | { component, row, element, event } | Evento disparado ao mover uma linha |
onDragStart | { component, row, element, event } | Evento disparado ao começar a mover uma linha |
onDragEnd | { component, row, element, event } | Evento disparado ao terminar de mover uma linha |
export interface IDraggable {
orderColumnName: string;
orderMode: 'asc' | 'desc';
getDragChanges: (oldIndex: number, newIndex: number, datasource: IDatasource, editedRows: IDictionary[])
=> { row: IDictionary, value: any }[];
}