Data - OrderList - 《PrimeNG Document》

Documentation
Source

OrderListOrderList is used to sort a collection. When the position of an item changes, the backend array is updated as well.

Documentation

Import


import {OrderListModule} from 'primeng/orderlist';

Getting Started

OrderList requires an array as its value and a ng-template for its content where each item in the array can be accessed inside the ng-template using a local ng-template variable.


<p-orderList [value]="cars">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-orderList>


export class MyComponent {
    cars: Car[];
    ngOnInit() {
        this.cars = //initialize cars
    }
}

Multiple Selection

Multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.

Selection Binding

The optional selection property is provided in case you'd like to a two-way binding to the selections.


<p-orderList [value]="cars" [(selection)]="selectedCars">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-orderList>


export class MyComponent {
    cars: Car[];
    selectedCars: Car[];
    ngOnInit() {
        this.cars = //initialize cars
    }
}

Filtering

Items can be filtered using an input field by enabling the filterBy property that specifies the fields to use in filtering.


<p-orderList [value]="cars" filterBy="brand"></p-orderList>

Multiple fields can be defines using a comma separates list.


<p-orderList [value]="cars" filterBy="brand,color,address.city"></p-orderList>

DragDrop

Items can be reordered using drag and drop by enabling dragdrop property.


<p-orderList [value]="cars" dragdrop="true">

Buttons Location

Buttons that control the ordering are displayed at the left side of the list by default, controlsPosition property enables customizing the location. Currently right is the available alternative.


<p-orderList [value]="cars" controlsPosition="right">

Properties

Name	Type	Default	Description
value	array	null	An array of objects to reorder.
selection	array	null	An array of objects to bind the selections.
header	string	null	Text for the caption
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
listStyle	string	null	Inline style of the list element.
filterBy	string	null	When specified displays an input field to filter the items on keyup and decides which fields to search against.
metaKeySelection	boolean	true	When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
dragdrop	boolean	false	Whether to enable dragdrop based reordering.
filterPlaceHolder	string	null	Placeholder text on filter input.
trackBy	Function	null	Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
controlsPosition	string	left	Defines the location of the buttons with respect to the list, valid values are "left" or "right".
ariaFilterLabel	string	null	Defines a string that labels the filter input.

Events

Name	Parameters	Description
onReorder	event: browser event	Callback to invoke when list is reordered.
onSelectionChange	originalEvent: browser event value: Current selection	Callback to invoke when selection changes.
onFilterEvent	originalEvent: browser event value: Current filter values	Callback to invoke when filtering occurs.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-orderlist	Container element.
ui-orderlist-list	List container.
ui-orderlist-item	An item in the list.

Dependencies

None.

Source

View on GitHub


<p-orderList [value]="cars" [listStyle]="{'height':'250px'}" header="Cars" 
    filter="filter" filterBy="brand" filterPlaceholder="Filter by brand" dragdrop="true">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-orderList>


export class OrderListDemo {
    cars: Car[];
    constructor(private carService: CarService) { }
    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }
}