Angular EasyUI 数据列表
属性列表
名称 |
数据类型 |
作用描述 |
默认值 |
data |
any[ ] |
要加载的数据。 |
[ ] |
itemCls |
string |
数据项样式类。 |
null |
itemStyle |
Object |
数据项内联样式。 |
null |
hoverCls |
string |
当鼠标悬停在数据项样式类上时。 |
datagrid-row-over |
selectedCls |
string |
选择数据项时的样式类。 |
datagrid-row-selected |
方法列表
名称 |
参数 |
返回值 |
作用描述 |
navRow |
step:number |
void |
浏览行。 |
scrollToSelectedRow |
none |
void |
滚动到选中的行。 |
注意:
- 继承: ListBaseComponent 。
- 选择器: eui-datalist 。
使用方法
<eui-datalist style="width:550px;height:250px"
[data]="data"
[(selection)]="selection"
selectionMode="single">
<ng-template euiItemTemplate let-row>
<div class="product f-row">
<img src="https://www.jeasyui.com/tutorial/datagrid/images/{{row.itemid}}.png">
<div class="detail">
<p>{{row.itemid}} - {{row.name}}</p>
<p>{{row.attr}}</p>
<p>List Price: {{row.listprice}}</p>
</div>
</div>
</ng-template>
</eui-datalist>