ListView
The ListView control provides the infrastructure to display a set of data items in different layouts or views.
About
To creating listview
we use <ul>
element with role data-role="listview"
.
The items are defined with <li>
element.
A list can have multiple views: list
, content
, icons
, icons-small
, icons-large
and tiles
.
<ul data-role="listview">
...
</ul>
Add item
Each listview item
are defined with <li>
element and special attributes for it: data-icon
, data-caption
.
<li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini"></li>
<li data-icon="images/setup.png" data-caption="setup.exe"></li>
To create icon
you can define tag
(for font icons) or path to image for <img>
.
View types
A listview
can have multiple views. To set view type use attribute data-view="..."
with values:
list
(default),
content
,
tiles
,
icons
,
icons-medium
or
icons-large
. You can change this attribute at runtime to change listview view.
<ul data-role="listview" data-view="tiles">
...
<ul>
View as content
For content
view, you can define additional data with attribute data-content="..."
.
Value for this attribute must be simple string or valid html. Also supports Metro UI components definition.
<ul data-role="listview" data-view="content" data-select-node="true">
<li data-icon="<span class='mif-folder fg-orange'>"
data-caption="Video"
data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>"></li>
<li data-icon="<span class='mif-folder fg-cyan'>"
data-caption="Images"
data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="desktop.ini"
data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
<li data-icon="images/setup.png"
data-caption="setup.exe"
data-content="<span class='text-muted'>Executable</span>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="file1.dat"
data-content="<span class='text-muted'>Data file</span>"></li>
</ul>
View as table
For table
view, you must define additional structure for items with attribute data-structure="{...}"
.
Value for this attribute must be valid json object stored as string.
This structure define additional columns. Each item in structure writes as key/value, where key is a name for additional field and value can be true or false.
True - field displayed, false - filed not displayed.
Now for each listview item you can set additional fields with data attribute data-key_name="..."
where key is a key from structure data.
<ul data-role="listview"
data-view="table"
data-select-node="true"
data-structure='{"date": true, "name": true}'>
<li data-icon="<span class='mif-folder fg-orange'>"
data-caption="Video"
data-date="12/21/2017"
data-name="Video library"></li>
<li data-icon="<span class='mif-folder fg-cyan'>"
data-caption="Images"
data-date="12/21/2017"
data-name="My images"></li>
</ul>
You can set styles for additional items. Each additional item stored in element with classes .node-data
+ .item-data-key_name
.
Grouping
Component listview
is supports a one level grouping of items.
To create grouping
you must place list of items to second level. It's all.
<ul data-role="listview" data-view="icons-medium">
<li data-caption="Folders">
<ul>
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
</ul>
</li>
<li data-caption="Devices and disks">
<ul>
<li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
<li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
<li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
<li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
<li data-icon="images/disk-network.png" data-caption="Network"></li>
</ul>
</li>
</ul>
If you need to create collapsing node, add attribute data-collapsed="true"
to item definition.
Selectable
Attribute data-selectable
enable or disable selectable
mode for listview
.
You can change this attribute at runtime.
Each checkbox linked with listview item on data attribute node
.
<ul data-role="listview" data-selectable="true">
...
</ul>
Events
When listview
works, it generated the numbers of events. You can use callback for this events to behavior with listview
.
Event | Data-* | Desc |
---|---|---|
onNodeClick(node) | data-on-node-click |
Fired when user click on node caption |
onNodeDblClick(node) | data-on-node-dblclick |
Fired when user dblclick on node caption |
onNodeInsert(node) | data-on-node-insert |
Fired when node was inserted |
onNodeDelete(node) | data-on-node-delete |
Fired when node was deleted |
onNodeClean(node) | data-on-node-clean |
Fired when node was cleaned |
onGroupNodeClick(state, check, node) | data-on-radio-click |
Fired when user click on radio input |
onExpandNode(node) | data-on-expand-node |
Fired when node was expanded |
onCollapseNode(node) | data-on-collapse-node |
Fired when node was collapsed |
onListviewCreate() | data-on-listview-create |
Fired when node was created |
Methods
You can use listview
methods to interact with the component at runtime.
- toggleNode(node) - toggle node state
- add(parent, data) - add node
- addGroup(data) - add group
- insertBefore(node, data) - add new node before specified node
- insertAfter(node, data) - add new node after specified node
- del(node) - delete node from tree
- clean(node) - clean node
- getSelected() - get selected nodes